jquery: обратный вызов click вызывается, даже если кнопка отключена? - PullRequest
Новая
       6

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

2 голосов
/ 05 февраля 2012

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

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

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

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

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

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

Отключенная кнопка не работает и не может быть нажата.

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

РЕДАКТИРОВАТЬ: проблема на самом деле возникает только под моим Chrome 16.0.912.77. Под Firefox и IE мой код работает просто отлично. Btw. Я использую jquery 1.7.1. Вот несколько скриншотов: кнопка , консоль после загрузки , консоль после нажатия кнопки

Мой код теперь в основном выглядит следующим образом: 

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 он не срабатывает, несмотря ни на что, только под (моим) хромом он ведет себя так. Что-то не так с тем, что я делаю?

P.S. извините что мой пост стал таким длинным

Ответы [ 2 ]

0 голосов
/ 05 февраля 2012

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

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

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

0 голосов
/ 05 февраля 2012

Я обнаружил, что это проблема с jQuery <1.5 и IE (по крайней мере, IE8).Попробуйте <a href="http://jsfiddle.net/khRBU" rel="nofollow"> один из рабочих примеров выше в IE8 и выберите jQuery 1.4.4 из выпадающего меню слева.Чтобы решить эту проблему, попробуйте обновить библиотеку jQuery.

...