jQuery:函数被调用两次。传播？为什么会出现这种情况？

Question

请看一下下面的 fiddle :http://jsfiddle.net/K9NjY/

我在这段代码上花了 3-4 个小时，并将其缩小到最短的版本，但现在我陷入了困境。

问题: 1. 点击“divOne” 2.点击切换DivNames 3. 单击“divTwo”

*为什么 divOne 仍然收到警报？我该如何阻止这个？ * 逻辑告诉我，当我们点击 divTwo 时，我们应该只收到一个显示“divTwo”的提醒

请注意，doSomething() 有一个由其中的点击 触发的函数。这不能更改，即 $("."+ divName).click(function(){...}); 必须保留在 doSomething()

内

对此我能做什么？

Answer 1

事件绑定(bind)到元素而不是它们的类名，每当调用该函数时，您都会将单击处理程序附加到匹配的元素。这就是为什么您会看到多个处理程序被调用的原因。您可以通过使用传递的参数来使用事件委托(delegate)，也可以使用 off 方法来删​​除处理程序。

编辑:通常，当您将多个处理程序附加到一个元素时，您会做错什么。将事件处理程序附加到其他处理程序中会带来痛苦。逻辑应该移到处理程序的主体中。

在这种情况下我可能会这样做:

var $e = $(".action").on('click', function() {
     var action = $(this).data('action');
     // Do something based on the element's current `action` datum
     if (action === 'whatever') {
       // ...
     } else {
       // ...
     }
});

function doSomething(divName) {
    $e.html(divName).data('action', divName);
}

这里的action数据可以在处理程序的逻辑中使用。