jquery elements added dynamically, on binding the click event does not act

And true pain, the time before the test is written clearly is possible, and later somehow you can not do, not how to do, he disk, for reasons to wind it, Why can not find before.

Solution: on the original method to find the selectors (as described in Example .info), to find the selector dynamically added (e.g., column .delete).

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd" >
<html>
<head>
<meta http-equiv= "Content-Type" content= "text/html; charset=UTF-8" >
<title>测试</title>
<script type= "text/javascript"
src= "../resources/js/jquery-1.11.1.min.js" ></script>
<script type= "text/javascript" >
$( function (){
//动态添加
$( ".add" ).on( "click" , function (){
console.log( "进来了" );
$( ".info" ).append( '<div class="delete"><h3>单击我来删除我</h3></div>' );
});
  //对动态添加的元素添加事件-删除
$( ".info" ).on( "click" , ".delete" , function (){
console.log( "进来了Delete!" );
$( this ).remove();
});
  });
</script>
  </head>
<body>
  <h2 class= 'add' >单击我添加动态元素</h2>
  <div class= "info" ></div>
  </body>
</html>
 

Guess you like

Origin www.cnblogs.com/love-dream-88/p/11433704.html