Dynamically writing out li with jquery. Element is not clickable after being written
- by estern
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?
