jquery - jq中动态生成的元素用on绑定事件，怎么还是不起作用
本文介绍了jquery - jq中动态生成的元素用on绑定事件，怎么还是不起作用的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
问 题
1.我在用inputfile做预览的时候，动态生成了一个img和a，目的是可以实现预览的时候可以删除，但是给a用on绑定点击事件的时候没有执行。
2.代码：
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>HTML5 Upload</title>
<script type="text/javascript" src="js/jquery-3.1.1.min.js"></script>
<script type="text/javascript">
$(document).ready(function(e) {
if(typeof FileReader == 'undefined') {
$("#destination").html('亲,您的浏览器还不支持HTML5的FileReader接口,无法使用图片本地预览,请更新浏览器获得最好体验');
} else {
//多图上传 input file控件里指定multiple属性 e.target是dom类型
$("#imgUpload").change(function(e) {
for(var i = 0; i < e.target.files.length; i++) {
var file = e.target.files.item(i);
if(!(/^image/i.test(file.type))) {
continue; //不是图片 就跳出这一次循环
}
//实例化FileReader API
var freader = new FileReader();
freader.readAsDataURL(file);
freader.onload = function(e) {
console.log(e.target.result);
var img = '<div class="box"><a href="###">删除</a><img src="' + e.target.result + '" width="200px" height="200px"/></div>';
$("#pic").remove();
$("#destination").append(img);
}
}
});
//处理图片拖拽的代码
var destDom = document.getElementById('destination');
destDom.addEventListener('dragover', function(event) {
event.stopPropagation();
event.preventDefault();
}, false);
destDom.addEventListener('drop', function(event) {
event.stopPropagation();
event.preventDefault();
var img_file = event.dataTransfer.files.item(0); //获取拖拽过来的文件信息 暂时取一个
//console.log(event.dataTransfer.files.item(0).type);
if(!(/^image/
.test(img_file.type)
)) {
alert('您还未拖拽任何图片过来,或者您拖拽的不是图片文件');
return false;
}
fReader = new FileReader();
fReader.readAsDataURL(img_file);
fReader.onload = function(event) {
var img = '<div class="box"><a href="###">删除</a><img src="' + event.target.result + '" width="200px" height="200px"/></div>';
$("#pic").remove();
$("#destination").append(img);
};
}, false);
}
/******这里点击不了***/
$(".box > a").on("click", function() {
alert("ok");
$(this).parent().remove();
})
});
</script>
</head>
<body>
<input type="file" id="imgUpload" name="imgUpload" accept="image/*" multiple/>
<div id="destination"><img src="#" alt="占位图片" id="pic" style="min-width:200px;min-height:200px;border:1px solid #000000;" /></div>
</body>
</html>解决方案
像这种生成动态元素，并给动态元素绑定事件，需要注意的是在绑定的时候需要有一个已经存在的父元素，这样才能使用委托机制来绑定事件。
也就是说上面的代码，.box及其子元素都是动态生成的，如果使用on来进行绑定的话，直接绑定到.box或者.box > a上是不行的，需要有一个父元素来委托，因此可以这样改写
$('body').on('click', '.box a', function () {
// your event handler
})
这里就是把body作为父元素来进行委托，jQuery里面的delegate方法绑定就是这样干的，题主可以参考一下
这篇关于jquery - jq中动态生成的元素用on绑定事件，怎么还是不起作用的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
