jquery append 动态添加的元素绑定事件on
用jquery添加新元素很容易,面对jquery append 动态添加的元素事件on 不起作用我们该如何解决呢?on方法中要先找到原选择器(如例.info),再找到动态添加的选择器(如列.delete)。
具体不多说了,请看下面的代码吧。
1 <!DOCTYPE html">
2 <html>
3 <head>
4 <meta charset=UTF-8">
5 <title>测试</title>
6 <script type="text/javascript"
7 src="js/jquery.js"></script>
8 <script type="text/javascript">
9 $(function(){
10 //动态添加
11 $(".add").on("click",function(){
12 console.log("进来了");
13 $(".info").append('<div class="delete"><h3>单击我来删除我</h3></div>');
14 });
15 //对动态添加的元素添加事件-删除
16 $(".info").on("click",".delete",function(){
17 console.log("进来了Delete!");
18 $(this).remove();
19 });
20 });
21 </script>
22 </head>
23 <body>
24 <h2 class='add'>单击我添加动态元素</h2>
25 <div class="info"></div>
26 </body>
27 </html>