如何给后添加的标签添加事件

时间 2019-11-05

标签如何添加标签事件繁體版

原文原文链接

如何给后添加的标签添加事件

1、总结

一句话总结：

给新添加的元素hidden_panel类添加点击事件：$("body").on("click", ".hidden_panel", function (e) { 执行的代码 });

<script>
  $(function () {
      $("body").on("click", ".hidden_panel", function (e) {
          $(this).children(".panel-body").toggle();
          $(this).children(".panel-footer").toggle();
          $(this).find(".panel-heading_symbol_left").toggle();
          $(this).find(".panel-heading_symbol_down").toggle();
      });
  });
</script>

2、给动态添加的标签添加事件的问题

转自或参考：给动态添加的标签添加事件的问题 - tangmin的博客 - CSDN博客
https://blog.csdn.net/tangminfx/article/details/82019340html

 1 测试代码：
 2 
 3 <!DOCTYPE html>
 4 <html>
 5   <head>
 6     <meta charset="UTF-8">
 7     <title>www.jb51.net - JS实现为动态建立的元素添加事件</title>
 8     <script src="js/jquery-1.9.1.min.js"></script>
 9   </head>
10   <body>
11     <button id="btn">添加事件</button>
12     <div id="panel"></div>
13     <script>
14 
15       //jquery部分实现
16       $("#btn").click(function(){
17         var arr= [];
18         for(var i=0;i<10;i++){
19           arr.push("<p id='nep'>"+i+"</p>");
20         }
21         $("#panel").html(function(){
22           return arr.join("<br/>");
23         });
24       });
25       //为动态建立的html标签元素添加事件
26       $("#panel").on("click",function(){
27         var that=$(this);//获取当前点击的this对象
28         alert(that.text())
29         console.log(that.text());
30       });
31     </script>
32   </body>
33 </html>

3、JQuery实现动态添加的标签元素的点击事件

转自或参考：JQuery实现动态添加的标签元素的点击事件
https://blog.csdn.net/doctor_ly/article/details/80253677jquery

这里所说的动态添加的元素的意思是：用js添加的标签元素bootstrap

想对一些数据实现分页，就本身写一个分页功能。用的是bootstrap的分页，在页面获取数据列表后，计算出须要分多少页展现，而后用js生成多个页码（是叫页码吗？）。生成后，点击某个页码跳到相应的页，这时确定要有点击事件。问题来了，没有点击事件。（最初一脸黑人问号）测试

这是由于在注册click后，再用js生成元素标签的。因此后添加的元素标签没有注册click事件。this

网上还有一种广泛的解决方案：spa

用on去注册事件，这种要有一个父级标签，而且这个父级标签不是用js生成的。.net

这样虽然元素标签在事件的注册以后，可是点击事件是注册在父级标签上的，咱们仍是能够触发对应的事件。code