JS/JQ控制操作由JS/JQ创建生成的元素

零分笔记2,6322023-02-01 23:48

在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）

标签：JQ创建DIV，JS代码

END

PHP下载远程图片到本地服务器JS逐条向上滚动代码

零分杂记

JS/JQ控制操作由JS/JQ创建生成的元素

文章分类

微信公众号

近期文章

JS/JQ控制操作由JS/JQ创建生成的元素

文章分类

标签云

微信公众号

近期文章