Есть ли недостатки при использовании «.on»?

Question

Надеюсь, это еще не спрошено, я ничего не нашел через Google, и мне действительно интересно. Вчера я столкнулся с ошибкой. Мой код выглядит следующим образом:

$(".button").click(function(){ 
    //Do something! 
}); 

Проблема заключалась в том, что класс .button был загружен через AJAX позже, так что это событие не было никогда огня. Я решил его с этим подходом:

$("body").on("click", ".button", function() { 
    //Do something! 
}); 

Так со вчерашнего дня, я думаю о том, что преимущества первого подхода (за исключением нескольких символов меньше). Неправильно ли прикрепить всех обработчиков к телу и уволить их только по определенным элементам? Или есть какая-то причина, почему я не должен использовать .on() все время, которое может сломать мой код?

Answer 1

.on также может работать с динамически добавленным йот объекты

В старых версиях Jquery мы использовали .live, .bind or .click т.д., но в настоящее время предпочтительным является .on

читать подробности здесь

http://api.jquery.com/on/

Difference between .on('click') vs .click()

Answer 2

«Плохо ли практиковать прикрепление всех обработчиков к телу и огонь их только при определенных элементах?»

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

Предпочтительный способ связывания событий - это как в первом примере (или выполнение эквивалента с помощью метода on), так как это свяжет событие непосредственно с элементом. Нет селектора, который необходимо оценить при возникновении события.

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

Answer 3

Прежде всего, разница между двумя вашими кодами заключается в том, что вы однажды привязываете событие непосредственно к кнопке и как только вы привязываете ее к элементу body и делегируете любой элемент .buttom внутри тела (не имеет значения, когда создается элемент «.button»).

Нет недостатка в использовании .on ('event', 'selector', function() {}), поскольку .click (function() {}) является псевдонимом для .on ('click', function () {}).

Для опоздания вы должны проверить функцию .delegate =>http://api.jquery.com/delegate/ Это связывает событие с любым выбранным элементом, теперь или в функции. Нет никакой реальной разницы в использовании .on или .delegate в вашем случае, поскольку .on заменяет функцию .delegate. Тем не менее, я предпочитаю использовать .delegate, так как легче понять, что я здесь делаю, и упростить поддержку/понимание кода через несколько лет.

$('body').delegate('.button', 'click', function() { 
// Do something! 
} 

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