Javascript 为什么我用jQuery添加的新段落在单击时什么都不做？

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

我的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>

测试
添加
第1款

第2款

我的js文件

$(document).ready(function(){

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

$（文档）.ready（函数（）{
$（“p”）。单击（函数（）{
console.log（“你好”）；
这个。删除（）；
});
$（“#添加”）。单击（函数（）{
$（“#添加”）。在（“”+$（“#newP”）.val（）+“
”）之后；
});
});

---

这两个示例段落正确删除并显示“Hello”，但新段落不正确。我想做一些比仅仅删除它们更复杂的事情，所以我需要知道为什么函数不能为它们工作。（我必须使用JQuery）

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

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

$（document.body）.on（'单击'，'添加'，函数（））{
$（this）.after（“”+$（“#newP”）.val（）+“
”）；
});

---

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

add

，然后选择

。add

不完全正确，因为它必须与jquery一起使用。对于类练习来说，在接受的答案中有一个jquery版本。如果需要，您可以将

$（document）

替换为动态元素显示位置的父元素，或者保持原样。