jQuery .live('click')会在禁用的按钮上触发事件。

Question

我正在使用最新版本的库（jQuery 1.7.1和jQuery UI 1.8.16），但是我已经绑定了一个.live('click')事件的按钮在禁用时仍然会触发。当我绑定一个常规的.click()事件时，它不会触发。

有什么建议吗？我认为我可能没有正确地使用.live()，或者这是jQuery UI中的一个错误。

这里是一个JSFiddle来演示。 http://jsfiddle.net/Kb66j/1/ 谢谢！ Alex

- jalexsmith

---

你的代码在Firefox中似乎运行良好，但在Chrome和Safari中出现问题。这个问题在一段时间前被报告为一个bug，不确定它的状态。 - Felix Kling

Answer 1

这是因为live利用了事件冒泡。当您点击禁用的按钮时，事件仍然会冒泡，因此live触发事件并执行所有click事件处理程序。您可以在执行任何操作之前在处理程序中检查按钮的启用状态。试试这个。

$("#the_button").button({
        icons: {
            primary: "ui-icon-disk"
        },
    disabled: true
}).live('click',function () {
    if($(this).is(':enabled')){
         alert('clicked');
    }
});

工作中 演示

正如其他人所述，从1.7+版本开始，live已被弃用，因此您可以尝试使用on，但是这个问题仍然存在，您必须按照我上面描述的方式处理它。

- ShankarSangoli

---

实际上，当我把所有东西都切换到 .on() 时，问题似乎已经消失了。 - jalexsmith

@user969352 - 这个代码能正常工作是因为你可能没有将selector传递给on方法，这是第二个可选参数。如果省略了selector或者它的值为null，那么事件处理程序被称为直接绑定的，而这不是live所采用的事件冒泡机制，因为它在document级别上附加事件处理程序。 - ShankarSangoli

我不确定你提供的原因是否正确。显然，这个问题只存在于Chrome和Safari中（不知道Opera怎么样）。 - Felix Kling

@FelixKling = 原因在这里提供：http://api.jquery.com/on/。请查看直接和委托事件部分。 - ShankarSangoli

所以呢？在我看来，点击一个禁用的按钮甚至不应该触发事件，在Firefox中似乎已经正确地解决了这个问题。无论如何，这个问题是已知的（在这里和这里），据说在1.5版本中已经修复了。现在的问题是这个bug是新的还是根本没有被修复。 - Felix Kling

是的，你说得对，我认为这可能是一个新的错误。 - ShankarSangoli

Answer 2

自jQuery 1.7版本起，.live()方法已经过时。现在请使用.on()来绑定事件处理程序。

同时，在jQuery 1.7版本中，建议使用.on()来代替.bind()。

以下是相关引用:

"自jQuery 1.7版本起，.on()方法是将事件处理程序附加到文档的首选方法。"

- Sparky

---

问题解决了！我用 .on() 替换了所有的 .live() 监听器，现在一切都很好。谢谢！ - jalexsmith

@Sparky672：如果我将代码转换为.on等效代码，则无法正常工作：http://jsfiddle.net/Kb66j/6/。我做错了什么吗？仅因为某个方法已被弃用并不意味着使用另一种方式来完成相同的事情会导致不同的行为。 - Felix Kling

如果你只是将 on 替换为 live，那么它不会产生相同的行为。它的行为就像你用 click 替换了 live。 - Felix Kling

@FelixKling，这个答案解决了OP的问题。也许你可以发表一个更好的解决方案，解释为什么简单地使用on()是不够好的，并且值得被down-votes。 - Sparky

正确（或至少更好）的答案和问题的解释由@ShankarSangoli提供。OP已经知道，只需使用click而不是live就可以解决问题。你建议将live改为on，但他显然以错误的方式（不知情）这样做，现在他最终使用了与使用click等效的东西。所以你也可以只写“*使用click而不是live*”。将live更改为等效的on（你的建议）不能解决手头的问题。因此，在我看来，你的回答没有用处。 - Felix Kling

Answer 3

已不再使用 live 方法

请改用新的 on() 方法

- cpjolicoeur

---

是的，它确实解决了问题。感谢您毫无理由地给出的负评。 - cpjolicoeur

是的，踩票可能有点过了。我不会这样做，但其他人更加严格。 - Felix Kling

@FelixKling 只有在 Chrome 16 上（webkit？）才会出现这种行为，在 ie8 :-) 和 firefox 9 上不会触发，我现在没有可用的 Safari 浏览器... - rene

是的，不要轻易地对边缘情况下的正确响应进行无效化。 - cpjolicoeur

@rene：有趣，我没有考虑到跨浏览器问题。它在Safari中也会触发。因此，这似乎是jQuery的一个错误，因为它没有一致地处理这个问题。此外，OP的原始代码显示了相同的行为。 - Felix Kling

@cpjolicoeur：如果在Chrome和Safari中无法正常工作，我不会称其为边缘情况。而且OP的“live”在Firefox中也没有触发（即它已经起作用），所以从技术上讲，你的答案并没有改变任何东西。 - Felix Kling