Значок изменения jQuery на клике [дубликат]

Что касается ilearned из Интернета и некоторых друзей .on () используется, когда вы динамически добавляете элементы. Но когда я использовал его на простой странице входа, где событие click должно отправить AJAX на node.js, а при возврате добавить новые элементы, он начал вызывать вызовы с несколькими AJAX. Когда я изменил его, нажмите () все пошло правильно. На самом деле я не сталкивался с этой проблемой раньше.

Они выглядят одинаково ... Документация из функции click () :

Этот метод является ярлыком для .bind ('click', обработчик)

Документация из функции on () :

Как и в jQuery 1.7, метод .on () обеспечивает все функции, необходимые для прикрепления обработчиков событий. Для получения помощи в преобразовании из старых методов событий jQuery см. .Bind (), .delegate () и .live (). Чтобы удалить события, связанные с .on (), см. .Off ().

$ ('. UPDATE'). click (function () {}); V / S $ (document) .on ('click', '. UPDATE', function () {});

[введите описание изображения здесь] [10]

Есть ли разница между следующим кодом?

Нет, нет функциональной разницы между двумя примерами кода в вашем вопросе. .click(fn) - это «метод быстрого доступа» для .on("click", fn). Из документация для .on() :

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

Обратите внимание, что .on() отличается от .click() тем, что имеет возможность создавать делегированных обработчиков событий , передав параметр selector, тогда как .click() этого не делает. Когда .on() вызывается без параметра selector, он ведет себя точно так же, как .click(). Если вы хотите делегировать событие, используйте .on().

.on() - рекомендуемый способ выполнения всех привязок событий к jQuery 1.7. Он переводит все функции как .bind(), так и .live() в одну функцию, которая изменяет поведение, когда вы передаете ему разные параметры.

Как вы написали свой пример, между ними нет никакой разницы. Оба привязывают обработчик к событию click в #whatever. on() предлагает дополнительную гибкость, позволяя вам делегировать события, запущенные детьми из #whatever, в одну функцию обработчика, если вы выберете.

// Bind to all links inside #whatever, even new ones created later.
$('#whatever').on('click', 'a', function() { ... });

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

$('.clickHere').click(function(){ 
     // this is flat click. this event will be attatched 
     //to element if element is available in 
     //dom at the time when JS loaded. 

  // do your stuff
});

$('.clickHere').on('click', function(){ 
    // same as first one

    // do your stuff
})

$(document).on('click', '.clickHere', function(){
          // this is diffrent type 
          //  of click. The click will be registered on document when JS 
          //  loaded and will delegate to the '.clickHere ' element. This is 
          //  called event delegation 
   // do your stuff
});

$('body').on('click', '.clickHere', function(){
   // This is same as 3rd 
   // point. Here we used body instead of document/

   // do your stuff
});

$('.clickHere').off().on('click', function(){ // 
    // deregister event listener if any and register the event again. This 
    // prevents the duplicate event resistration on same element. 
    // do your stuff
})

Как уже упоминалось в других ответах:

$("#whatever").click(function(){ });
// is just a shortcut for
$("#whatever").on("click", function(){ })

Отметив, что .on() поддерживает несколько других комбинаций параметров, которые .click() не позволяет, обрабатывая делегирование событий (superceding .delegate() и .live()).

(И, очевидно, существуют другие подобные методы быстрого доступа для «keyup», «focus» и т. д.)

Причина, по которой я отправляю дополнительный ответ это означает, что если вы вызываете .click() без параметров:

$("#whatever").click();
// is a shortcut for
$("#whatever").trigger("click");

Отметив, что если вы используете .trigger() напрямую, вы также можете передать дополнительные параметры или объект события jQuery, .click().

Я также хотел упомянуть, что если вы посмотрите на исходный код jQuery (в jquery-1.7.1.js), вы увидите, что внутри .click() (или .keyup() и т. д.) фактически вызовет .on() или .trigger(). Очевидно, это означает, что вы можете быть уверены, что у них действительно есть тот же результат, но это также означает, что использование .click() имеет немного меньшие накладные расходы - ничто не беспокоится или даже не думает об этом в большинстве случаев, но теоретически это может иметь значение в чрезвычайные обстоятельства.

EDIT: Наконец, обратите внимание, что .on() позволяет связать несколько событий с одной и той же функцией в одной строке, например:

$("#whatever").on("click keypress focus", function(){});

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

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

.on события динамически привязаны к элементам DOM, что полезно, когда вы хотите для присоединения события к элементам DOM, которые отображаются в запросе ajax или что-то еще (после того, как DOM готов).