How to access an <li> after removing it, and then adding it back again?

Question

I remove an <li> by clicking on a delete_it div within it.

In the same action, I append an <li> to the end of the list:

$(".delete_it").on("click", function(e){
$(this).parent().remove();
$(".images_list").append("<li class=\"things\"><div class=\"crop_it\"></div><div class=\"delete_it\"></div></li>");
});

I have functionality linked to the crop_it div in the newly appended <li>, that is not working.

$(".crop_it").on("click", function(e){
// do things
});

No errors in Firebug.

I thought that by using on, newly added selectors would be available.

Is there anything I can do to somehow re-initalise or refresh the view so that the newly added item is accessible?

Answer 1

Solution:

Instead of:

$(".crop_it").on("click", function(e) {

Use:

$(document).on("click", ".crop_it", function(e) {

See https://stackoverflow.com/a/17778024/1063287

Answer 2

Use Event delegation with on() method.

$(".images_list").on("click",".delete_it", function(e){
    $(this).parent('li').remove();
    $(".images_list").append("<li class=\"things\"><div class=\"crop_it\"></div><div class=\"delete_it\"></div></li>");
});

Same way do crop also

$(".images_list").on("click",".crop_it", function(e){
    // Do Cropping stuff here...
});