与使用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是您注入DOM的新元素。

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

因此：

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

Answer 2

您需要将点击处理程序应用于文档。

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

希望这有帮助！ ：）

Answer 3

将事件放在您的文档上而不是元素

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

Answer 4

将.on()事件设置为父元素，例如body，并将其委托给newtest div。

jQuery('body').on('click', '#newtest', function (event) {
    alert('Working!');
});