Question

I have have a a function that when a checkbox is checked i dynamically write out an li into a ol that is empty.

Code:

$(":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>");
    };
});

Then when that writes out there is a remove icon that will remove the item from the ol when clicked. This remove icon has a class of removeIcon which can be seen in the dynamic li above.

I have a function that processes the remove call and then does some actions:
Code:

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

Right now i have the remove action just trying to alert a message that it got called. But it seems that it is not getting into the function.

Is there a certain way that i need to access these dynamic li’s other then the .click method? I saw this post:
Dynamically Inserted DOM Elements are not Clickable using $.click()

Where they added .live vs .click but this doesn’t seem to work either.

Any ideas?

Answer 1

try using the live event…

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