时间戳

首页 > 解决方案 > 为什么我用 jQuery 添加的新段落在点击时没有任何作用？

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

问题描述

我的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>");
});
});

2 个示例段落正确删除并显示“Hello”，但新段落没有。我想做一些比删除它们更复杂的事情，所以我需要知道为什么该功能对它们不起作用。（我必须使用 JQuery）

标签： javascriptjqueryhtml

解决方案

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

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

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

推荐阅读