jQuery: не селектор не применяется

Question

У меня есть элемент <i>, имеющий класс comment-action edit-comment.

Я слушаю на click событие на этом элементе и сразу вызвал добавить дополнительный класс disabled ко всем этим <i> с:

$('.comment-action.edit-comment').on('click', function(){ 
    this.addClass('disabled'); 
    // another logic ... 
}); 

Это приводит к небольшому изменению слушателя событий, таким образом, чтобы быть

$('.comment-action.edit-comment:not(.disabled)').on('click', function(){ /* ... */ }); 

К сожалению, это похоже, что селектор :not() полностью игнорируется, так как нажатие на <i> с классом disabled по-прежнему вызывает событие li Stener.

Я также попытался более читаемый вид:

$('.comment-action.edit-comment').not('.disabled').on('click', function(){ /* ... */ }); 

с тем же результатом (как я и ожидал).

Любая идея, где есть улов?

Answer 1

Когда вы устанавливаете свои события, вы устанавливаете их непосредственно на каждый элемент, который соответствует. Все, что связано с комментарием и классом редактирования-комментария, имеет событие, когда оно загружается. Даже когда вы добавляете: not (.disabled), так как эти элементы не имеют отключенного класса при загрузке страницы, он соответствует.

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

$(document).on('click', '.comment-action.edit-comment:not(.disabled)', function() { 
    //... 
}); 

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

Answer 2

Причина:

Проблема с

$('.comment-action.edit-comment:not(.disabled)') 

и

$('.comment-action.edit-comment').not('.disabled') 

является то, что он проверяет, если селектор, не имеющий класс disabled в момент связывания события, а не при возникновении события.

Решение:

Вы можете проверить, если целевой элемент имеет disabled класс в обработчик событий. Если элемент clicked имеет класс, вы можете использовать return false в начале обработчика события. Так что код обработчика не выполняется.

$('.comment-action.edit-comment').on('click', function() { 
    if ($(this).hasClass('disabled')) { 
     return false; 
    } 

    /* Code Here */ 
});