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

Question

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三次，

感觉事件被注册了好多次，如何解决？

Answer 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);
            
        }
    });
}

Answer 2

事件绑定写在最外层，不要写在回调内，会重复触发的，
还有事jquery1.7还是哪个版本click确实有重复触发的问题，
或者绑定前先取消click

$('#sub').unbind('click').click(function () {
    ...
});

Answer 3

把绑定事件的语句放在外面去，没必要等html获取后才做绑定。