bind()方法向元素添加事件处理程序,对后续添加的元素无效。

live()方法向元素添加事件处理程序,对后续添加的元素有效,也叫动态添加事件。此方法在1.9中移除,用on方法代替。

看一个小Demo,你应该会明白的。

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Test</title>
</head>
<style>
  .bind li, .live li{
    cursor: pointer;
  }
</style>
<body>
<button id="addBtn">添加元素</button>
<h4>绑定元素,后加进来的元素无效</h4>
<ul class="bind">
  <li class="bind-li">初始元素</li>
</ul>
<hr>
<h4>动态绑定元素,后加进来的元素也有效</h4>
<ul class="live">
  <li class="live-li">初始元素</li>
</ul>
<!-- <script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.8.0.js"></script> -->
<script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.9.0.js"></script>
<script>
  $(function(){
    $("#addBtn").click(function(){
      $(".bind").append('<li class="bind-li">后加的</li>');
      $(".live").append('<li class="live-li">后加的</li>');
    });

    $(".bind-li").bind('click',{msg:'bind-hello'},function(e){
      alert(e.data.msg);
    });

   /*$(".live-li").live('click',function(){
      alert('live-hello');
    });*/

    //1.9使用on代替
    $(document).on("click", ".live-li", function() {
     alert('live-hello'); 
     });
  });
</script>
</body>
</html>

如未注明,均为原创,转载请注明来自Peak Xin's Blog

No Comments »