JQuery не выбирает добавленные элементы [дубликаты]

0

Я нашел этот пример: http://jsfiddle.net/jaredwilli/tZPg4/4/

$('#addScnt').live('click', function () {
    $('<p><label for="p_scnts"><input type="text" id="p_scnt" size="20" name="p_scnt_' + i +'" value="" placeholder="Input Value" /></label> <a href="#" id="remScnt">Remove</a></p>').appendTo(scntDiv);
    i++;
    return false;
});

$('#remScnt').live('click', function () {
    if (i > 2) {
        $(this).parents('p').remove();
        i--;
    }
    return false;
});

и когда я пытаюсь реплицировать результат и попробовать созданные <a> не будут выбраны jQuery

Моя скрипка: http://jsfiddle.net/sonicdeadlock/y3ACz/

$(".addItem").on("click", function () {
    var newInput = $('<p><input type="text" class="item" placeholder="item"></input><a href="#" class="removeItem">remove</a></p>');
    $(this).closest(".category").append(newInput);
});

$(".removeItem").on("click", function () {
    $(this).closest("p").remove();
});
Показать ещё 1 комментарий
Теги:
jquery-selectors

4 ответа

1
Лучший ответ

Вы добавляете элементы, поэтому вам необходимо использовать делегирование событий:

$(document).on("click", ".removeItem", function() {

Причина в том, что эти обработчики связаны при запуске, а при запуске эти новые элементы не существуют. Привяжите их к чему-то, что делает. Что касается рабочего примера, который вы нашли, он использует .live. .live который использовался для этого, но был заменен на .on в более поздних версиях jQuery

Поделиться
1

on() имеет различный синтаксис для делегирования, чем это делает автономный метод live().

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

Подобно:

$('.category').on('click', '.addItem',function(){
  /* handler code*/
})

ИЛИ

$(document).on('click', '.removeItem',function(){
  /* handler code*/
})

Элементы WHEN всегда находятся на странице, которую вы можете использовать on() с элементом в качестве селектора, используя синтаксис, который у вас есть.

Таким образом, существует два разных способа использования on()

API docs для on()

Поделиться
0

Использовать .on(), так как live() устарел

Прослушать событие.

$(document).on("click", ".removeItem", function() { ..code here.. });

Синтаксис

$( elements ).on( events, selector, data, handler );
Поделиться
0

Переместите свой селектор в родительский, который не будет заменен, а затем отфильтруйте до динамического элемента (ов):

$('body').on("click", ".addItem", function(){
    // your stuff here...
});

Если у вас есть нечто более конкретное, чем "тело", я бы рекомендовал использовать это вместо этого.

Поделиться

Ещё вопросы

Сообщество Overcoder
Наверх
Меню