附加内容后jQuery点击事件

Question

想知道为什么下面的例子不起作用？

<a id="load_list" href="#">Load the list</a>

<ul></ul>

<script type="text/javascript">
$(document).ready(function() {
    $('#load_list').click(function() {
        $('ul').append('<li><a href="#">Click here</a></li>');
        return false;
    });
    $('ul li a').click(function() {
        alert('Thank you for clicking');
        return false;
    });
});
</script>

Answer 1

因为在定义click处理程序时，您要追加的元素不存在，所以它们是动态创建的。 要解决这个问题，您可以使用jQuery中的delegate（）方法。

$('ul').delegate('a','click',function() {
    // your code here ...
});

在线示例： http ： //jsfiddle.net/J5QJ9/

Answer 2

从jQuery 1.7开始，您可以使用.on（）处理程序将新创建的元素绑定到“click”事件：

<script type="text/javascript">
$(document).ready(function() {
    $('#load_list').click(function() {
        $('ul').append('<li><a href="#">Click here</a></li>').on('click', 'ul li a', function () {
            alert('thank you for clicking');
        });
    });
</script>

（这是原始示例）。

Answer 3

$(document).on('click','ul li a', function(){
      // Content Code
});

Answer 4

.live从1.7开始被弃用。 试试这个（jquery 2.1.4）：

HTML：

<a id="load_list" href="#">Load the list</a>

<ul></ul>

JQuery的：

$(document).ready(function() {

 $('#load_list').click(function() {
   $('ul').html("");    

   $("<li/>", {
        "class" : "someClass",
        text: "Click here",
        click: function() {
          alert($(this).text());
        }
      }).appendTo('ul');
  });
});

或类似的东西（但我没有找到如何附加点击锚点）：

$(document).ready(function() {
 $('#load_list').click(function() {
   $('ul').html("");

   $('<li><a href="#">Click here</a></li>').on({
      click: function() {
        alert("hoi");
      }
    }).appendTo("ul");
 });
});

Answer 5

因为你在元素放在你需要使用的dom之前应用click事件.live（）

Answer 6

尝试这个新代码，它会删除旧元素的现有点击事件，然后再次为旧元素和新元素添加它们。

<a id="load_list" href="#">Load the list</a>

<ul></ul>

<script type="text/javascript">
$(document).ready(function() {
    $('#load_list').click(function() {
        $('ul').append('<li><a href="#">Click here</a></li>');
        $('ul li a').unbind('click', thanks());//Remove existing binds
        $('ul li a').bind('click', thanks());//Remove existing binds
        return false;
    });
    function thanks() {
        alert('Thank you for clicking');
        return false;
    });
    $('ul li a').bind('click', thanks());
});
</script>