|--转 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
|--转 如何给div块或者给某个DOM元素赋值
两种办法：
1、用js原生办法：
document.getElementById(“div”).innerHTML=“欢迎您！”;
也可以把这句话拆开：
var content = document.getElementById(“hh”);
content.innerHTML=“欢迎您！”;
针对新手注意一点细节：①innerHTML后面跟的是"="符号，一定注意不要写成(),不然会提示innerHTML不是函数的错误
此外，document.getElementById(“hh”).innerText=“欢迎您！”;也能达到效果
2、用jQuery方法：
$(“h1”).html(“欢迎您！”); 或者 $(“h1”).text(“欢迎您！”);这两种方式都能达到效果。
注意给具体元素赋值时的命名：直接给元素标签赋值：＄( " h 1 " ) ， ＄ ("h1")，＄("h1")，＄(“div”) ...
浏览更多内容请先登录。
立即注册
更新于：2022-05-26 02:24:07
相关内容
富文本编辑器
富文本编辑器Redactor在Yii2中的应用
WEB技术
WEB技术之前端技术
WEB技术之后端技术
WEB应用转手机APP，手机APP制作平台推荐
WEB应用与手机APP
Android相关
2017 年 Web 开发工程师技术发展路线图
session:手动删除客户端上的所有cookie,再次访问的时候为什么还是登录状态?
PHP向js传数组
js关于对齐方式display的三个属性
前端优化之lazy-load Chris__Liu
推荐内容
