文檔級事件監聽器被復制

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