JQuery: ссылка теряет кликабельность класса при добавлении

Вот мой вызов AJAX:

$.ajax({
 type: 'POST',
 url: '<!--?php echo site_url('channel_partners/cms/get_news'); ?-->',
 data: data,
 dataType: 'json',
 success: function(data, status, xhr) {
 var json = JSON.parse(data);
 for (var i=0; i<json.length; i++)="" {="" $('ul#news').append(="" '<li="" id="' + json[i].article_id + '"><a title="Delete Item" href="#" target="_blank">Delete</a> 
<a id="editItem" title="Edit Item" href="#" target="_blank">Edit</a>
 <a href="#" target="_blank">' + json[i].title + '</a>'
 ); 
 }
 },
 error: function(xhr, status, error) {
 //alert('Error: ' + status + ' ' + error);
 console.log(xhr)
 }
 });
</json.length;>

Мой вопрос таков: когда у меня есть обычная связь с классом "deleteItem", он запускает событие clickItem click. Мероприятие отлично работает. Но когда HTML добавляется программно через jQuery, ссылка больше не может быть нажата. Почему это невозможно? Как jQuery, он не распознает его. Что мне нужно сделать, чтобы сделать событие огнем? Я попытался добавить класс программно, но это не сработало.

4 ответа

Элементы, добавленные динамически к dom, должны использовать .on для jQuery .live/.delegate и .live/.delegate для более старых версий.

Обратите внимание, что для более старых версий использование .delegate предпочтительнее использования .live

В вашем случае это должно быть,

Использование .on (jQuery .on)

$('#news').on ('click', '.deleteItem', function () {
 //delete code
});

Для более старых версий с использованием .delegate [предпочтительный метод]

$('#news').delegate('.deleteItem', 'click', function () {
 //delete code
});

или с помощью .live,

$('.deleteItem').live ('click', function () {
 //delete code
});


Вы не показываете, как работает ваша ссылка, но я предполагаю, что вы привязали обработчик к исходной ссылке ".deleteItem" с использованием .click() или не делегированной формы .on() - любой из которых применяется только к элементам, которые существовали в то время. Если вы добавляете новые элементы динамически (например, после вызова Ajax), вам нужно привязать обработчик кликов после их добавления (например, в ваш обработчик успеха Ajax). Кроме того, вы можете использовать делегированные события:

$("#news").on("click", ".deleteItem", function() {
 // your delete handling code here
});

// OR for jQuery versions older than 1.7
$("#news").delegate(".deleteItem", "click", function() {
 // your delete handling code here
});

// OR for really old jQuery versions
$(".deleteItem").live("click", function() { ... });

С помощью .on() или .delegate() обработчики привязаны к объекту-контейнеру и будут автоматически применяться к любым дочерним объектам, которые соответствуют второму селектору, независимо от того, существуют ли они при загрузке страницы или добавляются позже. Функция .live() устарела, но является вашим единственным выбором до версии 1.4.2 - она работает аналогичным образом, но привязывает обработчик к документу, чтобы он был намного менее эффективным.


хорошо, это то, что происходит

  1. страница DOM загружается
  2. вы добавляете.deleteItem обработчики кликов
  3. вы добавляете динамически html

поэтому, конечно, элементы, добавленные вами (3), не имеют обработчиков кликов. Что вам нужно сделать, так это добавить обработчики кликов после append html-кода (или посмотреть на $.live)


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

licensed under cc by-sa 3.0 with attribution.