Динамически выписываем li с помощью jquery. Элемент не кликабелен после записи

Question

У меня есть функция, которая, когда флажок установлен, динамически записывает li в ol, который пуст.

Код:

$(":checkbox").click(function() {
    var checkedState = $(this).is(':checked');
    if (checkedState == true) {
       var productName = $(this).attr("title");
       $("#selectedProductsList").append("<li class=\"productList " + this + "\"><p class=\"removeIcon\"><img src=\"images/remove-icon.png\" alt=\"Remove Product\" /></p><span class=\"productName\">"+ productName +"</span></li>");
    };
});

Затем, когда это записывается, появляется значок удаления, который удаляет элемент из ol при нажатии. Этот значок удаления имеет класс removeIcon, который можно увидеть в динамическом li выше.

У меня есть функция, которая обрабатывает вызов удаления и затем выполняет некоторые действия: Код:

$('.removeIcon').click(function() {
 alert("starting");
});

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

Есть ли определенный способ, которым мне нужен доступ к этим динамическим файлам, кроме метода .click? Я видел этот пост: Динамически вставленные элементы DOM недоступны для нажатия, используя $ .click ()

Куда они добавили .live vs .click, но, похоже, это тоже не работает.

Есть идеи?

Answer 1

попробуйте использовать живое событие ...

$(".removeIcon").live("click", function () {
    alert("starting");
}

Answer 2

Используйте .delegate() вместо live().

$('#selectedProductsList').delegate('.removeIcon','click',function() {
   alert("starting");
});

Было бы крайне расточительно использовать .live(), поскольку кажется, что все элементы, на которые вы нацеливаетесь, всев том же контейнере.

Answer 3

Вам необходимо использовать live() для динамически добавляемых элементов ($(":checkbox").live('click', ...)), поскольку click() будет выполняться только один раз и будет перехватывать только те элементы, которые существуют до этого момента.

Answer 4

Если у вас есть идея, почему бы вам не поместить кнопку в объект? Вот небольшой пример (НЕ ИСПЫТАНО, чтобы помочь вам с идеей, но должно работать)

$(":checkbox").click(function() {
    var checkedState = $(this).is(':checked');
    if (checkedState == true) {
       var productName = $(this).attr("title");
       var product = $('<li class="productList"><span class="productName">'+ productName +'</span></li>"'); // create a object off the product
       var removeButton = $('<p class="removeIcon"><img src="images/remove-icon.png" alt="Remove Product" /></p>'); // create a object off the image aswell
       // now i can add a event to the object 'removeButton', in the same way what u did earlier(like $('.removeIcon'))
       removeButton.bind('click', function() {
            alert("This click function works");
       });

       // now add the remove button in front off the <span class="productName">
       // im using prepend because that function adds HTML in front off the object
       // append adds HTML at the end.

       product.prepend(removeButton);


       // put the product in your HTML
       $("#selectedProductsList").append(product);
    };
});