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三次,
感觉事件被注册了好多次,如何解决?
把绑定事件的语句放在外面去,没必要等html获取后才做绑定。
你的事件绑定不应写在异步的回调里,因为你既然已经使用事件委托的方式,那把事件绑定放到外面也是可以,而且只在进入页面时绑定一次。
// 放到外面
$(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);
}
});
}
事件绑定写在最外层,不要写在回调内,会重复触发的,
还有事jquery1.7还是哪个版本click确实有重复触发的问题,
或者绑定前先取消click
$('#sub').unbind('click').click(function () {
...
});