系列教程之jQuery动态append添加元素click点击事件失效

最近开始做前端，遇到一些问题，现在记录一下，以备不时之需。

问题描述：在div中动态添加span元素，之后执行

$(selector).click(function(){
    var param = $(this).text();
})

无法触发事件。

原因：append中的节点是在整个文档加载完之后开始添加，页面不会为append的元素初始化添加点击事件，故使用这种方式动态添加的节点中的click事件没有生效。

解决方案：事件委托方式解决，将指定的事件绑定在document上，只要append元素符合指定的元素，就会绑定此事件 。

$(document).on("click","指定的元素",function(){

});

最后实现代码

$(document).on("click", selector, function(){
        var param = $(this).text();
})

function setHtml(path) {
	var str = '';
	str = '<li class="mui-table-view-cell mui-media mui-col-xs-4">' +
				'<img class="mui-media-object" style=" height: 100px; width: 100px;" src="' + path + '">' +
				'<img class="mui-icon deleteBtn" src="images/delete.png" style="top: 1px; right: -3px; position: absolute; height: 22px; width: 22px;">'+
		  '</li>';
	jQuery("#imgs").append(str);
}



$(function() {  
	$(document).on("click", ".deleteBtn", function(){
		$(this).parent('li').remove(); //删除父元素
	})
});

 

参考：https://blog.csdn.net/qq_38332574/article/details/82841323