jquery: вызов callback вызывается, даже если кнопка отключена?

Question

У меня есть этот код:

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

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

Я ожидал, что событие щелчка не будет вызываться после щелчка, если кнопка отключена из-за этого <button> disableddescription на W3Schools:

Определение и использование

Атрибут disabled указывает, что кнопка должна быть отключена.

Отключенная кнопка непригодна для использования и не требует клика.

Однако, мой eventHandler по-прежнему вызывается после нажатия. Почему это? Нужно ли мне делать что-то вроде $(':button:not([disabled])').live('click', eventHandler);?

EDIT: проблема фактически ocurrs только под моим хромом 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"); 
}); 

сайтов (по заостренный):

<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! --> 

Под светлячок это не срабатывает независимо от того, что, как раз под (моим) хром, он ведет себя так. Что-то не так с тем, что я делаю?

P.S.жаль, что мой пост стал таким длинным

Answer 1

Я нашел, что это проблема с jQuery < 1.5 и IE (по крайней мере, IE8). Попробуйте one of the working examples above в IE8 и выберите jQuery 1.4.4 в выпадающем меню слева. Чтобы решить эту проблему, попробуйте обновить библиотеку jQuery.

Answer 2

В идеале у вас не должно быть HTML-тегов внутри тега, исключение - это тег, которого следует избегать в любом случае и использовать CSS для получения того же эффекта.

Если вы используете его для хранения атрибута класса, вы должны применить его к самой кнопке, поскольку любое форматирование, применяемое к кнопке, будет применено к содержимому кнопки, включая текст.

С вашего вопроса очевидно, что ваша проблема возникает изнутри, поэтому попробуйте удалить его и применить класс к фактической кнопке.