jquery操作动态生成的元素

最新推荐文章于 2022-10-31 19:38:33 发布

邓波home

最新推荐文章于 2022-10-31 19:38:33 发布

阅读量936

点赞数

分类专栏： web前端

http://www.shunar.cn http://www.geiar.com http://jgsxx.cn

本文链接：https://blog.csdn.net/dengboblog/article/details/78853577

版权

web前端专栏收录该内容

64 篇文章 1 订阅

订阅专栏

jq新版本的事件绑定主要是用on：

那么我们试着用on来写

<html>
<head>
  <title></title>
</head>
<script type="text/javascript" src="https://cdn.bootcss.com/jquery/1.10.2/jquery.min.js"></script>
<body>
<p id="add">点击增加元素</p>
</body>
<script type="text/javascript">
$("#add").one("click",function  () {
  $("#add").append('<p class="yuansu">增加的元素</p>');
})
$(".yuansu").on("click",function(){
  console.log(1);
})
</script>
</html>

我们会发现

on没有起作用

原因是jq不能获取到动态生成的元素

我们改成对静态元素进行操作

<html>
<head>
  <title></title>
</head>
<script type="text/javascript" src="https://cdn.bootcss.com/jquery/1.10.2/jquery.min.js"></script>
<body>
<p id="add">点击增加元素</p>
</body>
<script type="text/javascript">
$("#add").one("click",function  () {
  $("#add").append('<p class="yuansu">增加的元素</p>');
})
$("body").on("click",".yuansu",function(){
  console.log(1);
})
</script>
</html>