hasClass («отключен») не работает после .addClass («отключен»)

Question

hasClass («отключен») не работает после .addClass («отключен»)

0

При выбранной проверке hasClass корректно работает.

<div class="row dis">
    <input class="contact button selected" value="Contact Us">
</div>

Однако, если я удаляю выбранный через jquery:

<div class="row dis">
    <input class="contact button" value="Contact Us">
</div>

if (!$('.dis > .contact').hasClass('disabled')) {
    $("input.contact").click(function() {

        alert('---');
        $('.contact').addClass('disabled');

    });
}

hasClass все еще не находит отключенный класс после $('.contact').addClass('disabled'); ,

Итак, я хочу только первое предупреждение.

Демо-версия:

http://jsfiddle.net/dWGNJ/2/

daniel__ 04 окт. 2013, в 02:26

Источник

2

$('.dis > .contact').hasClass('disabled') возвращает соответствующие элементы прямо тогда . Он не будет автоматически связываться с новыми элементами, поскольку к ним добавлен класс. Вы можете связать «all» .dis > .contact (и проверить класс в обработчике) и / или, возможно, лучше использовать делегированные события .
user2246674 03 окт. 2013, в 23:44
0

Вам нужно использовать делегирование событий с .on() если вы привязываетесь к классам, которые могут динамически меняться.
Barmar 03 окт. 2013, в 23:45
1

@Barmar - не совсем, достаточно просто переместить условие внутрь обработчика событий.
adeneo 03 окт. 2013, в 23:55
0

@adeneo Это, по сути, то, что .on() делает автоматически.
Barmar 03 окт. 2013, в 23:58
0

@Barmar Бармар - По сути, да! Технически он перемещает обработчик событий в родительский элемент, что здесь не нужно?
adeneo 04 окт. 2013, в 00:06
0

@adeneo Интересно, должен ли это быть родитель? Может ли это быть сам элемент путем привязки к статическому классу, а аргумент селектора - это динамический класс, который добавляется к нему.
Barmar 04 окт. 2013, в 00:08
0

Я только что попробовал, видимо, это не работает.
Barmar 04 окт. 2013, в 00:11
0

@Barmar Бармар - Да, не будет работать. Принцип делегирования действительно очень прост -> jsfiddle.net/pvvYr , а для сложных селекторов это не так эффективно.
adeneo 04 окт. 2013, в 00:15

Показать ещё 6 комментариев

Теги:

javascript

jquery

2 ответа

0

При .disabled JS нет элемента .disabled, поэтому нет .contact с click().

enapupe 03 окт. 2013, в 22:02

Ещё вопросы

$('.dis > .contact').hasClass('disabled') возвращает соответствующие элементы прямо тогда . Он не будет автоматически связываться с новыми элементами, поскольку к ним добавлен класс. Вы можете связать «all» .dis > .contact (и проверить класс в обработчике) и / или, возможно, лучше использовать делегированные события .
Вам нужно использовать делегирование событий с .on() если вы привязываетесь к классам, которые могут динамически меняться.
@Barmar - не совсем, достаточно просто переместить условие внутрь обработчика событий.
@adeneo Это, по сути, то, что .on() делает автоматически.
@Barmar Бармар - По сути, да! Технически он перемещает обработчик событий в родительский элемент, что здесь не нужно?
@adeneo Интересно, должен ли это быть родитель? Может ли это быть сам элемент путем привязки к статическому классу, а аргумент селектора - это динамический класс, который добавляется к нему.
Я только что попробовал, видимо, это не работает.
@Barmar Бармар - Да, не будет работать. Принцип делегирования действительно очень прост -> jsfiddle.net/pvvYr , а для сложных селекторов это не так эффективно.

CᴴᵁᴮᴮʸNᴵᴺᴶᴬ · Accepted Answer · 2013-10-03T21-47-00.000Z

Вы могли бы сделать это вот так.

$('input.contact').on('click',function(){

    if( !$(this).hasClass('disabled') )
    {
        alert('---');
        $(this).addClass('disabled');
    }
});

В основном, когда input.contact щелкают, проверьте, если он имеет класс .disabled - если это не то вызвать alert и добавить класс .disabled - который, в свою очередь, предотвращает его от запуска второй раз, когда он щелкнул

Или у вас может быть несколько более элегантный способ сделать это:

$('.dis').on('click','input.contact:not(.disabled)',function(){
    alert('---');
    $('.contact').addClass('disabled');
});

Та же концепция.

@loops, это не тот результат, который ты ищешь? jsfiddle.net/dWGNJ/3