Выбор определенных элементов при использовании тела в качестве делегата

#javascript #jquery

Вопрос:

Я понимаю, что рекомендуется использовать тело в качестве делегата для событий .on():

 $('body').on('click', 'button', function() {
    $('input[type="checked"]').removeAttr('checked');
});

Я сталкиваюсь с проблемой при попытке выбрать определенные элементы, но того же типа. Так, например, если у меня есть кнопка с уникальным классом, идентификатором и т. Д., Я в конечном итоге выбираю первую кнопку в DOM.

 $('body').on('click', $('button#clear'), function() {
    $('input[type="checked"]').removeAttr('checked');
});

Есть ли какой-либо обходной путь для этого при использовании .on()?

Бонус: есть ли время, когда вы не должны использовать тело в качестве делегата? Если да, то какая была бы вторая лучшая альтернатива?

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

2. $(document) еще один. Особенно в случае динамически добавляемых элементов и если вы не знаете, где именно…

3. @NikTerentyev Спасибо! Кстати, как вам удалось отформатировать код в комментариях? Никогда не знал, что это возможно до сих пор.

4. @CarlEdwards не знаю, в правой части комментария есть ссылка.

Ответ №1:

body само по себе это не рекомендуется, можно с уверенностью сказать, что это сработает, поскольку ваш целевой элемент, вероятно, является дочерним элементом body — на самом деле, вы должны использовать статический контейнер для вашего содержимого AJAX в качестве начального селектора, например:

 <div id="container">
    <!--I GET POPULATED WITH AJAX CONTENT-->
    <input id="ajaxInput" /> <!--I came from an AJAX call-->
</div>

Теперь вы могли бы использовать

 $("body").on("click", "#ajaxInput", function() { });

Но это будет запускать проверку при каждом нажатии body . Гораздо лучшим селектором было бы:

 $("#container").on("click", "#ajaxInput", function() { });

1. Есть ли какой-либо способ выбрать объекты jQuery, такие как: $(‘button:first’) или он ограничивается только идентификаторами и классами?

2. @CarlEdwards: вы можете использовать любой селектор, который поддерживает jQuery: api.jquery.com/category/selectors , или даже создайте свои собственные псевдоселекторы.