页面元素用JS动态添加的有效事件绑定方式（on）

1. 常规事件绑定方式，直接监听匹配元素事件

   <div id="test1">
       <input type="button" class="btn" value="按钮1"/>
       <input type="button" class="btn" value="按钮1"/>
       <input type="button" class="btn" value="按钮1"/>
       <p></p>
   </div>
   <input type="button" class="add" value="加一个按钮" />
   <script type="text/javascript" src="js/jquery-1.10.2.min.js"></script>
   <script type="application/javascript">
       $(function(){
           $('.btn').on('click',function(){
               alert('绑定有效1')
           });
           $('.add').on('click',function(){
               $('#test1').append('<input type="button" class="btn" value="按钮2"/>')
           });
       })
   </script>

2. 通过监听父级容器下匹配子元素进行事件绑定
   

   <div id="test1">
       <input type="button" class="btn" value="按钮1"/>
       <input type="button" class="btn" value="按钮1"/>
       <input type="button" class="btn" value="按钮1"/>
       <p></p>
   </div>
   <input type="button" class="add" value="加一个按钮" />
   
   <script type="text/javascript" src="js/jquery-1.10.2.min.js"></script>
   <script type="application/javascript">
       $(function(){
           $('#test1').on('click','.btn',function(){
               alert('绑定有效1')
           });
           $('.add').on('click',function(){
               $('#test1').append('<input type="button" class="btn" value="按钮2"/>')
           });
       })
   </script>