无法解除绑定jQuery自定义事件处理程序

Question

我的页面中有一段代表视图的标记，以及与该视图关联的JS控制器函数。 （这些是Angular，但我不相信这个问题。）控制器代码监听从应用程序中其他地方触发的自定义事件，并使用某些特定于控制器的逻辑处理该事件。

我的问题是控制器的事件处理程序被连接了太多次：每次重新激活视图时都会连接，导致处理程序在每次自定义事件触发时都会运行多次。我只希望处理程序在每个事件中运行一次。

我已经尝试使用.off()在绑定处理程序之前解除绑定处理程序;我试过.one()以确保处理程序只运行一次;并且在阅读其与.off()here的相互作用之后我试过$.proxy()。

这里是我的代码草图：

// the code inside this controller is re-run every time its associated view is activated 
function MyViewController() { 

    /* SNIP (lots of other controller code) */ 

    function myCustomEventHandler() { 
     console.log('myCustomEventHandler has run'); 
     // the code inside this handler requires the controller's scope 
    } 

    // Three variants of the same misbehaving event attachment logic follow: 

    // first attempt 
    $('body').off('myCustomEvent', myCustomEventHandler); 
    $('body').on('myCustomEvent', myCustomEventHandler); 
    // second attempt 
    $('body').one('myCustomEvent', myCustomEventHandler); 
    // third attempt 
    $('body').off('myCustomEvent', $.proxy(myCustomEventHandler, this)); 
    $('body').on('myCustomEvent', $.proxy(myCustomEventHandler, this)); 
    // all of these result in too many event attachments 

}; 

// ...meanwhile, elsewhere in the app, this function is run after a certain user action 
function MyEventSender() { 
    $('body').trigger('myCustomEvent'); 
    console.log('myCustomEvent has been triggered'); 
}; 

点击左右在我的应用程序切换到麻烦视图五次，然后做它运行MyEventSender动作后，我的控制台看起来就像这样：

myCustomEvent has been triggered 
myCustomEventHandler has run 
myCustomEventHandler has run 
myCustomEventHandler has run 
myCustomEventHandler has run 
myCustomEventHandler has run 

我怎样才能得到它看起来像这样：

myCustomEvent has been triggered 
myCustomEventHandler has run 

???

Answer 1

你可以窃听范围在主控制器破坏事件

function MyViewController($scope) { 
    function myCustomEventHandler() { 
     console.log('myCustomEventHandler has run'); 
     // the code inside this handler requires the controller's scope 
    } 

    $('body').on('myCustomEvent', myCustomEventHandler);  

    $scope.$on("$destroy", function(){ 
     $('body').off('myCustomEvent', myCustomEventHandler); 
     //scope destroyed, no longer in ng view 
    }); 
} 

编辑这是一个angularJS的解决方案。当你逐页移动时，ngview会不断加载。随着功能被反复调用，它会一遍又一遍地重复这个事件。你想要做的是当有人离开视图时解除/删除事件。您可以通过挂钩到$ destroy（带有美元符号）事件来执行此操作。你可以在这里阅读更多：$destroy docs

Answer 2

问题是，当多次调用function MyViewController(){}时，会得到一个单独的myCustomEventHandler实例（附加到当前闭包），因此将其传递给$.off不会取消注册前一个处理程序。

KevinB's answer，事件命名空间，是我建议删除特定的处理程序，而不需要知道哪个处理程序安装。如果您可以在元素被移除/隐藏时取消注册事件，那么会更好，那么您可以引用要取消注册的函数，而不必担心删除其他代码可能添加到同一事件名称空间的处理程序。毕竟，事件名称空间只是一个全局字符串池，容易受到名称冲突的影响。

If you make your function global，它也将工作（除非它看起来像你需要关闭），但我只是显示它说明问题，使用命名空间

function myCustomEventHandler() { 
    console.log('myCustomEventHandler has run'); 
    // the code inside this handler requires the controller's scope 
} 

function MyViewController() { 

    // first attempt 
    $('body').off('myCustomEvent', myCustomEventHandler); 
    $('body').on('myCustomEvent', myCustomEventHandler); 
    // second attempt 
    $('body').one('myCustomEvent', myCustomEventHandler); 
    // third attempt 
    $('body').off('myCustomEvent', $.proxy(myCustomEventHandler, this)); 
    $('body').on('myCustomEvent', $.proxy(myCustomEventHandler, this)); 

} 

// ...meanwhile, elsewhere in the app, this function is run after a certain user action 
function MyEventSender() { 
    $('body').trigger('myCustomEvent'); 
    console.log('myCustomEvent has been triggered'); 
} 
MyViewController(); 
MyViewController(); 
MyEventSender(); 

---

上一页理念

其中一个问题是，您没有将相同的功能传递给 $.on和 $.off，因此off在此情况下不会取消注册任何内容

不是问题所在，将答案留给参考，因为它不完全直观。如果传递相同的函数和上下文，$.proxy似乎会返回对相同绑定函数的引用。 http://jsbin.com/adecul/9/edit

Answer 3

给你的事件一个命名空间，然后当你重新运行控制器时，简单地删除所有带有上述命名空间的事件。

jsbin

$('body').off('.controller'); 
$('body').on('myCustomEvent.controller', myCustomEventHandler);