JS/JQ控制操作由JS/JQ创建生成的元素
- 2,963
在JQ/JS操作由JQ/JS创建的元素时，需要将操作function放入JS创建元素里面，如放在外面，可能无法操作，由于浏览器从上而下加载代码，在操作创建元素之前，该元素并不存在，而操作JS已经存在，将导致无法找到元素！
放入创建元素之内，在创建元素之后创建操作代码，即可找到创建的元素！
举个例子：
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8" />
<title>JS/JQ控制操作由JS/JQ创建生成的元素</title>
<script type="text/javascript" src="https://blog.32xp.com/wp-content/themes/Eson.X.Blog.V1.1.0/img/js/jquery-3.3.1.min.js"></script>
</head>
<body>
<div id="text">点击创建内容</div>
<div id="show"></div>
<script type="text/javascript">
$("#text").click(function(){
$("#show").html('<div id="a" style="padding:50px;">点击我将消失</div>');
});
$("#a").click(function(){
$("#a").remove();
});
</script>
</body>
</html>以上这段代码，点击消失无效（无法移除#a的DIV）
正确代码：
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8" />
<title>JS/JQ控制操作由JS/JQ创建生成的元素</title>
<script type="text/javascript" src="https://blog.32xp.com/wp-content/themes/Eson.X.Blog.V1.1.0/img/js/jquery-3.3.1.min.js"></script>
</head>
<body>
<div id="text">点击创建内容</div>
<div id="show"></div>
<script type="text/javascript">
$("#text").click(function(){
$("#show").html('<div id="a" style="padding:50px;">点击我将消失</div>');
$("#a").click(function(){
$("#a").remove();
});
});
</script>
</body>
</html>可以点击消失（可以移除#a的DIV）
声明：博客中如无特殊说明或标注的文章均为博客原创文章，部分文章来源互联网，如有侵犯您的版权，或者对零分博客发布的文章有异议，请来信告知删除、修改，如您有好的建议或者意见也可以来信，谢谢！
请TA喝杯水^_^
如本文“对您有用”，欢迎随意打赏，让我们坚持创作！
请TA喝水![]()
