Question

为了使它适用于静态控件和动态，我们需要使用live（）编写代码，如下所示：

<!DOCTYPE html>
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.0/jquery.min.js"></script>
</head>
<body>
<a class="link">Link Static</a>
<button id="addmore" type="button">Add more</button> 
<script>

 $(document).ready(function() {
   $('#addmore').click(function() {
      $('body').append(' <a class="link">Link Dynamic</a>');
        return false; 
  }); 
   $("a.link").live('click', function() {
      alert('I am clicked');
   });
  });   
</script>

</body>
</html>

但是，我发现不推荐使用live（）。我读到我需要使用on（）而不是live（）。能否帮助我如何使用on（）获取上述代码？

此致 Niladri

Answer 1

你应该从像

这样的父容器中delegate

$('body').on('click', 'a.link', function() {
    alert('I am clicked');
});

Answer 2

试试这个......

$(document).ready(function() {
   $('#addmore').click(function() {
      $('body').append(' <a class="link">Link Dynamic</a>');
        return false; 
  }); 
   $(document).on('click', function() {
      alert('I am clicked');
   });
  });

REF：http://api.jquery.com/on/

http://jsfiddle.net/wf2kqLdj/2/

Answer 3

在event-delegation.

的帮助下尝试

 $(document).ready(function() {
   $('#addmore').click(function() {
      $('body').append(' <a class="link">Link Dynamic</a>');
        return false; 
  }); 
   $(document).on('click', 'a.link', function() {
      alert('I am clicked');
   });
  });

Jquery - 生活和继续

3 个答案: