用jquery添加新元素很容易,面对jquery append 动态添加的元素事件on 不起作用我们该如何解决呢?

用jquery添加新元素很容易,面对jquery append 动态添加的元素事件on 不起作用我们该如何解决呢?on方法中要先找到原选择器(如例.info),再找到动态添加的选择器(如列.delete)。

代码:

 1 <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
 2 <html>
 3 <head>
 4 <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
 5 <title>测试</title>
 6 <script type="text/javascript"
 7 src="../resources/js/jquery-1.11.1.min.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>

 

posted @ 2017-03-23 17:15  zhaobao1830  阅读(306)  评论(0编辑  收藏  举报