javascript - 为什么我用 jQuery 添加的新段落在单击时没有任何反应？

Question

我的 html 中有一些段落作为示例，当我单击它时，JQuery 单击会正确激活并执行 de 函数。但是，我有一个按钮可以向正文添加新段落，但新段落在单击时没有执行任何操作，我不知道为什么:

我的 html 正文

        <h1> Test </h1>
        <input type="text" id="newP" value="New paragraph">
        <button id="add"> Add </button>
        <p> Paragraph 1 </p>
        <p> Paragraph 2 </p>

我的js文件

$(document).ready(function(){

$("p").click(function(){
    console.log("Hello");
    this.remove();
});
$("#add").click(function(){
    $("#add").after("<p> " + $("#newP").val() + "</p>");
});
});

两个示例段落正确删除并显示“Hello”，但新段落则不然。我想做一些比删除它们更复杂的事情，所以我需要知道为什么该函数对它们不起作用。 (我必须使用 JQuery)

Answer 1

原因是您在添加新元素之前添加了新的点击监听器。 您可以使用点击处理程序的三参数形式，它也适用于添加的新元素。

$(document.body).on('click', '#add', function(){
    $(this).after("<p> " + $("#newP").val() + "</p>");
});

另一个问题可能是您有多个具有相同 id 的元素。您应该为它们提供 css 类，例如 add，然后选择 .add。