Question

请参阅以下代码：

HTML：

<p>Click this paragraph.</p>

JS：

$("p").live("click", function(){
    alert("The paragraph was clicked.");  

    $("body").append("<p>This was newly added. this has also click</p>")
});

现在该元素正确追加。但是单击不会触发附加元素。如果我使用live代替on，则其工作正常。但是现场被贬值了。怎么做。

JSfiddle

Answer 1

使用.on

的委托样式

.on（events [，selector] [，data]，handler）


events类型：String一个或多个以空格分隔的事件类型和可选命名空间，例如＆＃34; click＆＃34;或＆＃34; keydown.myPlugin＆＃34;。

selector类型：String一个选择器字符串，用于过滤触发事件的所选元素的后代。如果选择器是   null或省略，事件总是在到达时触发   选定的元素。

data类型：触发事件时要在event.data中传递给处理程序的任何数据。

handler类型：Function（Event eventObject [，Anything extraParameter] [，...]）事件发生时要执行的函数   触发。值false也允许作为a的简写   简单地返回false的函数。

由于您不想传递数据，您可以写下表格：

$(body).on('click', 'p', handler)

省略了数据参数。

＆＃13;

$("body").on("click", "p", function(){
    alert("The paragraph was clicked.");  

    $("body").append("<p>This was newly added. this has also click</p>")
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<p>Click this paragraph.</p>

＆＃13;

Answer 2

将其更改为：

$("body").on("click", "p", function(){
    alert("The paragraph was clicked.");  

    $("body").append("<p>This was newly added. this has also click</p>")
});

JSFiddle

您不想使用p，因为这只会对页面上已有的p元素起作用，因此您添加的新元素将无效。

如果您使用body并在单击p时进行设置，请执行该功能，它将起作用。

添加元素后需要单击以触发

2 个答案: