JQuery: удаленный элемент добавлен динамически

Question

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

Главная:

<script> 
    $(document).ready(function(){ 
     $('.ImageManager').click(function (event) { 
      event.preventDefault(); 
      var w = window.open("/image-manager", "popupWindow", "width=600, height=400, scrollbars=yes"); 
     }); 
    }); 
    $(document).ready(function(){ 
     $(".remove").on("click", function(){ 
      $(this).parent().remove(); 
     }); 
    }); 
    </script> 

<ul id="imagelist"> 
</ul> 
<a href="" class="ImageManager">Add Image</a> 

Image Кормушка Popup:

<script> 
    $(document).ready(function(){ 
     $(".addimage").click(function() { 
      var imgname = $('img', this).attr("alt"); 
      $("#imagelist", window.opener.document).append('<li>' + imgname + '<a class="remove">Remove</a></li>'); 
     }); 
    }); 
</script> 

В всплывающем окне имя изображения хранится в альтернативном тексте. Когда я нажимаю кнопку «Удалить» на главной странице, ничего не происходит. Оставил другие сообщения SO с одинаковыми названиями, но не может найти подобное решение.

Answer 1

Это будет элемент, который добавляется после DOM готов, так это динамическое, и вы будете нуждаться в делегированный обработчик события:

$(document).ready(function(){ 
    $('.ImageManager').click(function (event) { 
     event.preventDefault(); 
     var w = window.open("/image-manager", "popupWindow", "width=600, height=400, scrollbars=yes"); 
    }); 

    $("#imagelist").on("click", ".remove", function(){ 
     $(this).parent().remove(); 
    }); 
});