jquery - 使用 jQuery 选择新元素

Question

我正在学习 jQuery/javascript，有一个相当基本的问题。为什么这不起作用？提前致谢。

<script type="text/javascript">
            $(document).ready(function () {
                $('<div/>', {
                    id: 'foo',
                    text: 'Does not work'
                }).appendTo('body');       });
</script>

<script type="text/javascript">
            $("#foo").click(function () {
                alert('Success'); });
</script>

Answer 1

它不起作用，因为第二个脚本部分将在 $(document).ready 触发之前执行。因此它将尝试将 onclick 处理程序附加到尚不存在的元素。

您可以通过在添加元素时将 click() 事件附加到元素来使其工作:

$(document).ready(function () {
    $('<div/>', {
         id: 'foo',
         text: 'Does not work'
    })
    .appendTo('body')
    .click(function() {
       alert('Success');
    });       
});

或者使用on():

$('document').on("click", "#foo", function() {
  alert('Success');
});