|-转 jquery动态添加元素后，元素的事件无效（已解决）
1.先点击“动态添加”按钮，把a标签动态生成出来。 2.再点击a标签（百度），查看控制台。 $("#xinjia").on(click,#a1,function(){ console.log(123);
动态添加元素后，元素的事件无效（已解决）
基于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标签动态生成出来。...
浏览更多内容请先登录。
立即注册
分享的网址网站均收集自搜索引擎以及互联网，非查问网运营，查问网并没有提供其服务，请勿利用其做侵权以及违规行为。
更新于：2023-12-25 23:42:10
相关内容
富文本编辑器
富文本编辑器Redactor在Yii2中的应用
WEB技术
WEB技术之前端技术
WEB技术之后端技术
WEB应用转手机APP，手机APP制作平台推荐
WEB应用与手机APP
Android相关
2017 年 Web 开发工程师技术发展路线图
session:手动删除客户端上的所有cookie,再次访问的时候为什么还是登录状态?
php中动态输出变量内容，查看进程状态的方法
前端优化之lazy-load Chris__Liu
php如何防止表单重复提交
推荐内容
