jquery事件多次添加

Question

我有一个相当大的 javascript 类，可以生成完整的 ajax 生成的应用程序。在 ajax 页面的一个版本中，有许多下拉菜单。这些菜单可以在应用程序生命周期的不同时间点创建和销毁。

这是我看到的行为：

用户打开页面版本 1：没有下拉菜单 用户转到页面版本 2：使用 jQuery onchange 事件添加的下拉菜单。按预期工作。 用户返回到页面的版本 1，下拉列表被删除。 用户返回到第 2 版页面，再次添加下拉菜单（使用相同的元素 ID） 下拉菜单现在将具有“双重”事件处理，触发每个 onchange 的事件。

我正在努力解决的行为如下。

在初始页面加载时，我添加了一个 onchange 事件：

  function myClass(){
       //Initiate once for current and future elements.
   jQuery(document).on('change',".mydropdowns",
   function(e){
        self.submitDescriptionChange(this);
    }
   );
   }

   myClass.prototype.submitDescriptionChange = function (el){
        doSomeAjaxStuff();
   }

这很好用，除了每次用户转到页面版本 1 并返回页面版本 2 时，事件都会成倍增加。很快，您就可以在每个更改事件中触发 20 次事件，在这种情况下会创建 20 次 ajax 调用。

从逻辑上讲，通过使用 jQuery.off() 我应该能够避免这种情况。但是发生的事情是事件从过去和未来的元素中删除，这意味着当我重新创建页面版本 2 时，下拉菜单将不起作用。

我尝试过的每一种方式（并且我尝试过 LOADS），我要么最终没有触发事件，要么触发了多个事件。我似乎找不到一种方法来添加/替换事件只触发一次的元素。

有什么办法可以解决这个问题吗？

更新

是的，事实证明我误诊了问题。它实际上来自反复重新绑定“hashchange”事件，而不是重新绑定 onchange 事件。为误导而道歉。将 bind() 函数移至仅在解决问题后才执行的某个位置。

Answer 1

由于您不希望 .off() 从其他页面中删除您的事件，我建议为您的事件使用命名空间。例如，像这样：

function myClass(pageno) {
    var pref_ev = 'mypage' + pageno + '.' + 'change';
    $(document).off(pref_ev).on(pref_ev, ".mydropdowns", function(e) {
        self.submitDescriptionChange(this);
    });
}

这样，每个页面都会有自己的“更改”事件，例如“mypage1.change”。该事件仍然正常注册为更改事件；前缀命名空间“mypage1”仅用于对正确的事件执行 .off() 调用。

Answer 2

我不确定您的下拉菜单使用的是什么插件，但该插件上应该有一个“销毁”方法。如果您在删除应该起作用的下拉菜单时调用它。此外，如果您只是隐藏第二页而不是实际将其从 DOM 中删除，则您不必重新调用插件，因为插件仍将保存在元素上。