附加内容后的 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 处理程序时附加的元素不存在，因此它们是动态创建的。要解决此问题，您可以使用 delegate()来自 jQuery 的方法。

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

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