文档级事件侦听器被复制

Question

我正在使用SammyJS来定位网站，我也使用此文件结构在我的controller/内，我有4个主要页面。在里面，它们看起来像这样，

＆＃13;

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

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

之前（第一次导航）

之后（第二次导航）

有没有办法阻止这个？我理解使用$('#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);
  });
});