附加内容后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
});