jquery动态添加元素后，元素的事件无效（已解决）
基于jquery1.9以上版本作的解决方案
先贴一段正常逻辑写的代码
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<script src="jquery-3.3.1.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function(){
//b2的单击事件，这里面动态添加了一个a元素内容为百度,id为a1
$("#b2").on('click',function(e) {
var a = $("<a></a>");
a.attr("id","a1");
a.html("百度");
$("#xinjia").html("");
$("#xinjia").append(a);
});
//id为a1的元素单击事件
$("#a1").on('click',function(){
console.log(123);
});
})
</script>
</head>
<body>
<a id="ceshi">ceshi</a>
<button id="b2">动态添加</button>
<div id="xinjia">
</div>
</body>
</html>
前端页面操作流程：
1.先点击“动态添加”按钮，把a标签动态生成出来。
2.再点击a标签（百度），查看控制台。
结果：控制台啥也没有输出
因为这样写是有问题的。所有需要修改一下。我先把我修改后的代码贴出来。后面解释
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<script src="jquery-3.3.1.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function(){
$("#b2").on('click',function(e) {
var a = $("<a></a>");
a.attr("id","a1");
a.html("百度");
$("#xinjia").html("");
$("#xinjia").append(a);
});
$("#xinjia").on('click','a',function(){
console.log(123);
});
})
</script>
</head>
<body>
<a id="ceshi">ceshi</a>
<button id="b2">动态添加</button>
<div id="xinjia">
</div>
</body>
</html>
前端页面操作流程：
1.先点击“动态添加”按钮，把a标签动态生成出来。
2.再点击a标签（百度），查看控制台。
**结果：控制台开始输出了 **
开始作解释了。其实大家可以看出来，这里只有一个区别。我把这两个贴出来
==========控制台不输出===========
//id为a1的元素单击事件
$("#a1").on('click',function(){
console.log(123);
});
==========控制台输出============
$("#xinjia").on('click','#a1',function(){
console.log(123);
});
第一个里，我们是直接对id=a1的元素作单击事件。但是这种jquery获取不到动态添加元素id。因为在jquery1.9以上里。添加了一个解决方案。
方案解释：
既然不能直接获取动态添加的元素，但是咱们可以先获取其所在的父元素。然后再获取动态元素。
就是相当于说，给父元素添加一个事件（该事件类型和动态元素想要实现的事件类型一样）
所以这里可以得到：
$("#xinjia").on('click',回调);
这个时候，还可以继续指定，这个事件的生效范围。那么我们就改造了。
比如，我只想让该父元素中的id为a1的子元素发生指定事件的时候再触发“回调函数”（这里指定id为xinjia的父元素中id为a1的子元素“点击”时候才调用“回调函数”），如下图
<div id="xinjia">
<a id="a1"></a> <!--动态生成元素-->
</div>
因此，把这个指定加入后，得到：
$("#xinjia").on('click',"#a1",回调);
在jquery中。第二个参数就是选择器，id选择器，类选择器，元素选择器等等。
只要记住，在动态生成的元素中，不能直接指定其事件。只能其父标签的事件后，过滤指定特定元素事件。
还有一种写法:直接指定dom的元素事件。这也是可以的。
$(document).on('click',"#a1",function(){
console.log("123");
})
扫一扫
426
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
