最近开始做前端,遇到一些问题,现在记录一下,以备不时之需。
问题描述:在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