Как получить доступ к недавно добавленным HTML-элементам в jQuery

Вот пример моей проблемы:

HTML

<p><a href="#">I would like to say:</a></p>

JQuery

$("a.clickme").click(function() {
 $('p').append('<div><a href="#" id="say-hello">Hello</a></div>');
});
$("#say-hello").click(function(){
 alert('test hello');
});

Здесь сценарий с примером кода: http://jsfiddle.net/johnmorris/2UVYd/2/

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

Мне просто интересно, есть ли способ обойти это. И если да, то что это. Кажется, я не понимаю, как это понять.

4 ответа

Вам нужно подождать, чтобы назначить событие до появления элемента:

$("a.clickme").click(function() {
 $('p').append('<div><a href="#" id="say-hello">Hello</a></div>');
 $("#say-hello").click(function(){
 alert('test hello');
 });
});

Обратите внимание, что назначение click для вновь созданного якоря - INSIDE для другого обратного вызова click.

@Vega использует другой метод, называемый "делегирование", где вы назначаете клик для "say-hello" для p вместо самого якоря. Когда щелчок привязывается, событие "пузырится" вверх через DOM и попадает на прослушиватель событий в теге p. Это работает правильно, но это может быть не подходящее время для делегирования. Делегирование обычно используется, когда у вас есть коллекция элементов внутри общего контейнера (например, LI в UL), которые все должны обрабатывать одно и то же событие. Если у вас просто есть "say-hello" , я бы рекомендовал не использовать делегирование.

Если вам нужно несколько раз щелкнуть по кнопке и установить ее несколько раз, то делегирование может быть правильным (но вам нужно прекратить использование жестко запрограммированного идентификатора). Или... вы могли бы сделать это следующим образом:

$("a.clickme").click(function() {
 $('<div><a href="#">Hello</a></div>').find('.say-hello')
 .click(function(){
 alert('test hello');
 })
 .end()
 .appendTo('p');
});

Этот код действительно копает во вновь созданные элементы и присоединяет событие до добавления в DOM. (О, и обратите внимание, что я использую имя класса, а не идентификатор для "say-hello" .)


Ваш код не работает, потому что $("#say-hello") не существует в dom, когда вы привязываете его к обработчику кликов.

Однако вы можете использовать .on, как в следующем синтаксисе, который будет искать элемент с идентификатором say-hello, который будет позже добавлен в 'p',

DEMO

$("p").on('click', '#say-hello', function(){
 alert('test hello');
 })


jQuery(".your_append_element_class').live('click',function() {
 // Your Code goes here..
});


Вы также можете попробовать это, что позволит избежать проблемы с созданием нескольких элементов DOM с тем же идентификатором. Он дает каждому случайный идентификатор, добавляя случайное число от 1 до 100 к имени ID:

Обратите внимание, что я добавил добавление обработчика кликов в существующий клик .

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

licensed under cc by-sa 3.0 with attribution.