jquery：ボタンが無効になっていてもクリックコールバックが呼び出されますか？

Question

私はこのコードを持っている：ボタンが原因で無効になっている場合、私はありませんクリック後に起動するクリックイベントを期待

// 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);のような何かをする必要がありますか？

EDIT：問題は実際には私のクロムの下でのみ発生する16.0.912.77。 firefoxとIEの下で私のコードは正常に動作します。 Btw。私は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> 

私はあなたがコメントで提供されている例に、内側スパンを追加しようとすると、私は（クローム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を（先のとがったことで、jqueryのは、バージョン1.5.2に設定されている）：

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

Htmlの（先のとがっ別）：

<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の下では、それは関係なく発生しません何、ちょうど（私の）クロムの下でこれのように振る舞います。私がやっていることに何か悪いことはありますか？

P.S.申し訳ありませんが、私の投稿が長らくなった

Answer 1

これはjQuery < 1.5とIE（少なくともIE8）の問題です。 IE8でone of the working examples aboveを試し、左側のドロップダウンからjQuery 1.4.4を選択してください。 この問題を解決するには、jQueryライブラリを更新してみてください。

Answer 2

理想的には、タグ内にHTMLタグを入れないでください。ただし、避けるべきタグは例外で、CSSを使用して同じ効果を得ることは例外です。

クラス属性を保持するために使用している場合は、ボタンに適用されている書式がテキストを含むボタンの内容に適用されるため、これをボタン自体に適用する必要があります。

あなたの問題は内部から生じていることは明らかですので、それを取り外して実際のボタンに適用してみてください。