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

Question

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

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

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

“main/test”有这个脚本：

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

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

所以当我第一次加载它并单击#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();
});