开发者社区> 问答> 正文

异步加载过来的html,用jquery给某个元素绑定事件,事件被重复绑定了,求解?

function fillAgentQueues(){
    ApiSvc.queryAgents({},function(res){
        console.log(res);
        if(res.success){
            var template = '{{#data}}<tr id="{{agentId}}"><td>{{agentId}}</td><td>{{userName}}</td></tr></option>{{/data}}';
            var html = Mustache.render(template, res);
            $('.agentTable tbody').html(html);
            $(document).on('click', '.agentTable tbody tr', function () {
                alert('点击了');
                $(this).toggleClass('agentSelected');
            });
        }
    });
}

函数第一次被调用没有问题,每次点击一下,都会alert一次,并且改变类。
函数第二次被调用时,每次点击一次,都会alert两次,
函数第三次被调用时,每点击一次,都会alert三次,

感觉事件被注册了好多次,如何解决?

展开
收起
小旋风柴进 2016-06-01 08:57:43 2030 0
1 条回答
写回答
取消 提交回答
  • 你的事件绑定不应写在异步的回调里,因为你既然已经使用事件委托的方式,那把事件绑定放到外面也是可以,而且只在进入页面时绑定一次。

    // 放到外面
    $(document).on('click', '.agentTable tbody tr', function () {
        alert('点击了');
        $(this).toggleClass('agentSelected');
    });
    
    function fillAgentQueues(){
        ApiSvc.queryAgents({},function(res){
            console.log(res);
            if(res.success){
                var template = '{{#data}}<tr id="{{agentId}}"><td>{{agentId}}</td><td>{{userName}}</td></tr></option>{{/data}}';
                var html = Mustache.render(template, res);
                $('.agentTable tbody').html(html);
                
            }
        });
    2019-07-17 19:22:39
    赞同 展开评论 打赏
问答排行榜
最热
最新

相关电子书

更多
《零基础HTML入门教程》 立即下载
天猫 HTML5 互动技术实践 立即下载
天猫HTML5互动技术实践 立即下载