jquery:即使按钮被禁用，也会调用单击回调？

Question

我有这个代码:

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

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

我预计如果按钮因此而被禁用，则单击后不会调用单击事件 <button> disabled description在 w3schools:

Definition and Usage

The disabled attribute specifies that a button should be disabled.

A disabled button is unusable and un-clickable.

但是，我的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>

如果我尝试将内部跨度添加到您在评论中提供的示例中，我会得到以下结果(在 chrome 16.0.912.77 下):

Javascript(由 j08691 提供):

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

Html(作者: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 下它的行为是这样的。我所做的事情有什么问题吗？

附注抱歉我的帖子变得这么长

Answer 1

我发现这是 jQuery < 1.5 和 IE(至少 IE8)的问题。试试one of the working examples above在 IE8 中，然后从左侧的下拉列表中选择 jQuery 1.4.4。要解决此问题，请尝试更新 jQuery 库。