文档级事件监听器被复制

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);
  });
});

文档级事件监听器被复制

Document level event listeners being duplicated

javascript

jquery

sammy.js

之前（第一次导航）

之后（第二次导航）