jquery - jQuery动态加载时多次绑定事件，如何避免？

Question

我动态加载内容，如下所示：

$.post('main/test', data,function(resp){
    $('#container').html(resp);
});

容器只是<div id="container"></div>

“主/测试”有这个脚本：

$('body').on('click','#login-logs',function(e){
  e.preventDefault();
  $('#login-logs-last').toggle();
  $('#login-logs-details').toggle();
});

现在的问题是，我可以多次加载这个页面“main/test”，每次我这样做，事件都会再次绑定。

所以当我第一次加载它并点击#login-logs时会发生什么，它像预期的那样工作（隐藏#login-logs-last并显示#login-logs-details），但是当我再次加载页面时，它会相反，第三次它再次工作，依此类推。

所以问题是，我怎样才能让这个 on('click','#login-logs') 事件只绑定一次，我第一次动态加载页面时......？而不是每次我加载页面...

为什么？我希望用户能够来回浏览不同的页面，这意味着“主/测试”页面将被加载多次..

Answer 1

off()在附加新的处理程序之前，您将删除以前的处理程序on()：

$('body').off('click','#login-logs')
         .on('click','#login-logs',function(e){
              e.preventDefault();
              $('#login-logs-last, #login-logs-details').toggle();
});