删除后如何访问<li>，然后再将其添加回来？</li>

Question

我通过点击其中的<li> div来移除delete_it。

在同一操作中，我将<li>附加到列表的末尾：

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

我的功能与新添加的crop_it中的<li> div相关联，但无效。

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

Firebug中没有错误。

我认为通过使用on，新添加的选择器将可用。

我能以某种方式重新启动或刷新视图，以便可以访问新添加的项目吗？

Answer 1

<强>解决方案：

而不是：

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

使用：

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

请参阅https://stackoverflow.com/a/17778024/1063287

Answer 2

使用on()方法使用事件委派。

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

同样裁剪

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