【问题标题】:jQuery .live('click') fires even on disabled buttonsjQuery .live('click') 即使在禁用按钮上也会触发
【发布时间】:2014-05-22 22:18:38
【问题描述】:

我正在使用所有库的最新版本(jQuery 1.7.1 和 jQuery UI 1.8.16),但是我绑定了 .live('click') 事件的按钮仍然会触发,即使按钮是禁用。当我将常规 .click() 事件绑定到它时,它不会触发。

有什么建议吗?我在想要么是我使用不当 .live() 要么这是 jQuery UI 中的一个错误。

这里有一个 JSFiddle 来演示。 http://jsfiddle.net/Kb66j/1/

谢谢! 亚历克斯

【问题讨论】:

标签: jquery jquery-ui


【解决方案1】:

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

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

工作Demo

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

【讨论】:

  • 实际上,当我将所有内容切换到 .on() 时,问题似乎已经消失了。
  • @user969352 - 它工作正常,因为您可能没有将selector 传递给on 方法,这是第二个可选参数。如果selector 被省略或为空,则事件处理程序被称为直接或直接绑定,而live 不是这种情况,它纯粹适用于事件冒泡机制,因为它在document 级别附加事件处理程序.
  • 我不确定您提供的理由是否正确。显然这个问题只存在于 Chrome 和 Safari 中(不知道 Opera)。
  • @FelixKling = 原因在此处提供api.jquery.com/on。检查直接和委托事件部分。
  • 所以?在我看来,单击禁用按钮甚至不应该触发事件,而且它似乎在 Firefox 中正常工作。无论如何,the problem was known(和here)据说它已在 1.5 中修复。现在的问题是这个错误是新的还是根本没有修复。
【解决方案2】:

从 1.7 版开始,.live() has been deprecated

"从 jQuery 1.7 开始,不推荐使用 .live() 方法。使用 .on() 来 附加事件处理程序。”

此外,从 1.7 版开始,.on() 优先于 .bind()

"从 jQuery 1.7 开始,.on() 方法是 将事件处理程序附加到文档。”

【讨论】:

  • 问题解决了!我用 .on() 替换了所有 .live() 侦听器,效果很好。谢谢!
  • @Sparky672:如果我将代码转换为 .on 等效项:jsfiddle.net/Kb66j/6 我做错了什么?仅仅因为一个方法被弃用并不意味着使用另一种方法来做同样的事情会导致不同的行为。
  • @user969352:如果您只是将on 替换为live,则不会产生相同的行为。它的行为就像您将 live 替换为 click
  • @FelixKling,这个答案为 OP 解决了这个问题。也许您可以发布一个更好的解决方案来解释为什么仅使用 on() 还不够好,应该投反对票。
  • @ShankarSangoli 提供了该问题的正确(或至少是更好的)答案和解释。 OP 已经知道,简单地使用 click 而不是 live 确实可以解决问题。您建议将live 切换为on,他显然以错误的方式(不知道)这样做了,现在他最终使用了相当于使用click 的东西。所以你也可以写“使用click而不是live。将live 更改为等效的on(您的建议)不能解决手头的问题。因此,您的答案在 imo 中没有用。
【解决方案3】:

live has been deprecated

改用新的 on() 方法

【讨论】:

  • 是的,它确实解决了问题。感谢您无缘无故地投反对票
  • 是的,反对票可能太多了。我不会这样做,但其他人更严格。
  • @FelixKling 仅在 Chrome 16 (webkit?)、ie8 :-) 和 firefox 9 上显示此行为,它不会触发,我现在没有可用的 safari 浏览器...
  • 是的,不要这么快就使边缘情况的正确响应无效
  • @rene:有趣,我没有考虑跨浏览器的问题。它也会在 Safari 中触发。所以这似乎是 jQuery 中的一个错误,因为它不能始终如一地处理这个问题。此外,OP 的原始代码显示了相同的行为。
猜你喜欢
  • 2014-11-25
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
相关资源
最近更新 更多