当我动态加载时，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();
});

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

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

所以问题是，我怎样才能使这个（'click'，'＃login-logs'）事件只被绑定ONCE，我第一次动态加载页面......？而不是每次我加载页面......

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

Answer 1

在使用off()添加新处理程序之前，您将使用on()删除上一个处理程序：

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