文档级事件侦听器被复制

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's 来处理导航）到另一个页面然后返回时，事件侦听器正在被复制，如此处所示（使用 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);
  });
});