jquery：即使按钮被禁用，也会调用点击回调？答案

【问题标题】：jquery: click callback is called even if button is disabled?jquery：即使按钮被禁用，也会调用点击回调？
【发布时间】：2012-02-04 21:53:22
【问题描述】：

我有这个代码：

// jquery
$(':button').live('click', eventHandler);

<!--html-->
<button type="button" name="lvldown" disabled="disabled">Level down</button>

如果由于 w3schools 的 <button> disabled description 而禁用按钮，我希望在单击后不会调用单击事件：

定义和用法

disabled 属性指定一个按钮应该被禁用。

禁用的按钮无法使用且无法点击。

但是，我的eventHandler 在点击后仍然被调用。这是为什么？我真的需要像$(':button:not([disabled])').live('click', eventHandler);这样的事情吗？

编辑：这个问题实际上只发生在我的 chrome 16.0.912.77 下。在 Firefox 和 IE 下，我的代码运行良好。顺便提一句。我使用 jquery 1.7.1。以下是一些截图： the button, console after load, console after click on the button

我的代码现在基本上是这样的：

jQuery(document).ready(function() {
    $(':button').live('click', eventHandler);
    constraintActions();
});

function constraintActions() {
    // level down
    $('.shopCat').not('.shopCat[data-parent]').each(function() {
        var lvlDownButton = $(this).children('p').children('[name=lvldown]');

        if ($(this).children('.shopCat').size() > 0 || 
                $(this).next('.shopCat').size() == 0) {
            lvlDownButton.addClass('disabled'); 
            lvlDownButton.attr('disabled', 'disabled'); // also tried: lvlDownButton.prop("disabled", true);
        } else {
            lvlDownButton.removeClass('disabled');  
            lvlDownButton.removeAttr('disabled'); //also tried: lvlDownButton.prop("disabled", false);
        }
    });

function eventHandler() {
    console.log($(this));
}

EDIT2：实际上按钮html看起来像这样：

<button type="button" class="submit btn-generic" name="lvldown" disabled="disabled">
    <span class="lvldown">Podřadit</span>
</button>

我试图只保留一个本质，但似乎我遗漏了一些重要的东西，而那个重要的东西是内部的跨度，因为以下工作（！）按预期工作：

<button type="button" class="submit btn-generic" name="lvldown" disabled="disabled">
    Podřadit
</button>

如果我尝试将内部跨度添加到您在 cmets 中提供的示例中，我会得到这些结果（在 chrome 16.0.912.77 下）：

Javascript（由 j08691 编写）：

$('button').live('click', function(){alert('FIRE!')});

Html (by j08691):

<button type="button" disabled="disabled">Level down</button> <!-- does not fire -->
<button type="button" disabled="disabled"><span>Level down</span></button> <!-- does fire!-->

Javascript（通过 Pointy，jquery 设置为 1.5.2 版本）：

$<button disabled>Hi</button>('button').live('click', function() {
    alert("click");
});

Html（通过 Pointy）：

<button disabled>Hi</button> <!-- does not fire -->
<button disabled><span>Hi</span></button> <!-- does not fire -->
<!-- after changing jquery version to 1.7.1 -->
<button disabled><span>Hi</span></button> <!-- does fire! -->

在 firefox 下它无论如何都不会触发，就在（我的）chrome 下它的行为是这样的。我在做什么有什么问题吗？

附：对不起，我的帖子变得这么长了

【问题讨论】：

显示完整代码。这不应该发生。有些东西不见了……
It works fine for me.也许宇宙对你不满意for using w3schools。
不会为我开火：jsfiddle.net/khRBU
更新：我的代码在 Firefox 和 IE 下按预期工作，但在 chrome 下不行。我使用 jquery 1.7.1。我已经用 1.7.1 尝试了你的例子，它们都在我的 chrome 下工作。这将是有趣的调试......（控制台中没有错误）。

标签： jquery button click

【解决方案1】：

我发现这是 jQuery one of the working examples above 并从左侧的下拉列表中选择 jQuery 1.4.4。要解决此问题，请尝试更新 jQuery 库。

【讨论】：

【解决方案2】：

理想情况下，标签内不应包含任何 HTML 标签，但无论如何都应避免使用的标签除外，并使用 CSS 来获得相同的效果。

如果您使用它来保存类属性，则应将其应用于按钮本身，因为应用于按钮的任何格式都将应用于按钮内容，包括文本。

从您的问题中可以明显看出您的问题源于内部，因此请尝试将其删除并将该类应用于实际按钮。

【讨论】：