文档级事件监听器被复制

Question

我正在使用SammyJS来路由网站，并且也在使用此文件结构， 在我的controller/内部，我有4个主页。 里面看起来像这样

 (function() { var app = Sammy.apps.body; app.get('#/clients', function(context) { context.render('/view/clients/index.html', function(view) { $('body').html(view); }); }); app.get('#/clients/edit', function(context) { context.render('/view/clients/edit.html', function(view) { $('body').html(view); $(document).on('click', '#updateClient', function() { //Do stuff for updating client here... }); }); }); }); 

通过第一次导航，一切正常。 HTML和JavaScript可以完美加载，并且按钮可以按预期工作。 但是在页面导航（我正在使用href来处理导航）到另一个页面然后返回时，事件监听器已被复制，如此处所示（使用Chrome）

之前（第一次导航）

之后（第二个导航）

有什么办法可以阻止这种情况？ 我了解使用$('#idNameHere').on('click', function() {...}); 有效，但不适用于动态生成的元素。 同样，页面刷新可以删除侦听器（很明显）。 我相信这也可能是SammyJS的运行方式的一部分，即使您离开页面，它也可以使JavaScript文件在后台运行。

Answer 1

您可以将事件侦听器移到根目录，以便仅设置一次。 由于事件监听器是在文档上设置的，因此可以与动态添加的内容配合使用。

(function() {
  var app = Sammy.apps.body;

  $(document).on('click', '#updateClient', function() {
    //Do stuff for updating client here...
  });

  app.get('#/clients', function(context) {
    context.render('/view/clients/index.html', function(view) {
      $('body').html(view);
    });
  });

  app.get('#/clients/edit', function(context) {
    context.render('/view/clients/edit.html', function(view) {
      $('body').html(view);
  });
});