javascript - 与使用 jQuery 添加的内容进行交互

Question

我有一个简单的例子

    <div id="test">add more text</div>

当您点击此文本时

    jQuery('#test').on('click', function (event) {
        $('body').append("<div id='newtest'>new test</div>");
    });

您会看到更多文本。 单击“添加更多文本”后，我的页面如下所示

<div id="test">add more text</div>
<div id="newtest">new test</div>

我想知道我需要做什么才能与 newtest div 交互？

如果我把下面的内容放进去。

jQuery('#newtest').on('click', function (event) {
    alert('not working?');
});

什么也没发生。 如何与加载后添加的内容进行交互？我认为 .on 帮助我做到了这一点？

Answer 1

之所以需要使用 $(document).on() 而不是 $('#newtest').on() 是因为 #newtest 是您注入(inject)到 DOM 中的新元素。

您现在必须对最初位于 DOM 中的较高元素使用 .on() )，以便将事件处理程序附加到新注入(inject)的元素。

因此:

jQuery(document).on('click', '#newtest', function (event) {
    alert('This will work now');
});