用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>