关于JQ的click无法操作后来添加的元素的解决方法

问题描述：

我的界面在上传了图片之后，会插入新的图片到界面，但是此时却无法执行删除操作，原先在的却是可以的。

解决方法：采用on：

$(document).on('click', '.del', function(){
    var obj = $(this);
    $.confirm("确定要删除该图片吗？", function () {
        obj.parent().remove();
    });
});

————完美解决了。

 

为什么呢？原因：

因为click的时候，元素其实并没有被绑定到文档中，因为dom在第一次加载的时候，才会深度遍历成dom树，而后来添加的是没有的。那么on方法相当于，把事件添加到了它的父级/更高级，而父级/祖先级原先就是存在的，已经深度遍历过了。