Jquery"；“生活”；好的，但是；关于；不在jsfiddle上

一定是出了什么事。我不知道是什么

/*
$（“p”）.live（“单击”，函数（）{
$（此）。在（“另一段！
”）之后；
});
*/
$（“p”）。在（“单击”，函数（）{
$（这个）。在（“现在单击我…另一段！
”）之后；
});

---

我选择了jquery1.7.2。而且

live

工作正常，但

上的
未附加单击事件。根据jquery文档，
上的
应该可以作为
live运行
已被弃用。有什么想法吗？
您需要为动态创建的元素委派任务。所以你应该用这样的东西<代码>正文
可以替换为
p

$('body').on('click','p',function(){
     $(this).after("<p>Now Click Me...Another paragraph!</p>");
});

$（'body'）。在（'click'，'p'，function（）上{
$（这个）。在（“现在单击我…另一段！
”）之后；
});


这样，事件会在父元素中冒泡，并在那里进行处理，因为dom就绪时，
body
就在那里。按照您的操作方式，它将仅附加到dom就绪时存在的
p
元素。
如果未正确绑定
on
事件，则需要将其绑定到父级

$("body").on("click", "p", function(){ });

jsFiddle：

使用
$（'selector'）绑定它。on（）
语法的工作原理与
完全相同。单击（）
，事件不会被委派。如果您希望将其委派（也称为live），则需要使用
$（'parent'）。on（'click'，'selector'）
语法。
“on”的工作方式与此不同。您对父元素调用“on”，该父元素将使子元素动态附加到它。在这种情况下，它将是身体

$('body').on('click', 'p', function(){});

在您的示例中，
.on（）
运行良好

但是请记住，
$（某些选择器）。live（'click'，function（）{}）
并不等于
$（某些选择器）。on（'click'，function（）{}）
，但是

$(document).on('click', some_selector, function(){});

On将事件附加到所选元素的子体。您将附加到没有子体的p，并且新添加的段落p将插入到处理程序中添加到的p标记之后，因此它不会位于其下（新添加的p不是您附加到的p的子体单击On）

为了解释我的意思，将现有的p放在div中，新添加的p将是父div的后代，on将附加到每个新添加的p上，该p是id为div1的div的后代

选择器是第二个参数，用于筛选触发事件的选定元素的后代。如果选择器为null或省略，则事件始终在到达选定元素时触发


$("#div1").on("click", "p", function(){
  $(this).after("<p>Now Click Me...Another paragraph!</p>");
});

$（“#div1”）。在（“单击”，“p”，函数（）{
$（这个）。在（“现在单击我…另一段！
”）之后；
});

或者，您可以将其放在文档上以附加，单击添加到文档中的每个元素p

$(document).on("click", "p", function(){
  $(this).after("<p>Now Click Me...Another paragraph!</p>");
});

$（文档）。在（“单击”，“p”，函数（）上）{
$（这个）。在（“现在单击我…另一段！
”）之后；
});

​

​
 奇怪..对我来说很好..@undefined In question Rab提到on不附加click事件。但它工作正常。@Rab它工作正常。你希望它做什么？顺便问一下，我仍然使用
live
，尽管它被弃用，因为它比
上的
更容易使用。
：）我看不出它工作。当我动态创建新段落时。单击不正确attached@RabNawaz你没有把它绑好。这是正确的方式：谢谢。但是在api.jquery.com/on上。搜索“示例”。它从文档中将其绑定为ami:
事件处理程序仅绑定到当前选定的元素；在代码调用.on（）时，它们必须存在于页面上。
。如果希望委派事件（也称为live），则需要调用父级上的
.on
，并向其传递选择器。请看本页最后一个示例。@RabNawaz请看第八个示例。这向您展示了如何将事件绑定到动态创建的元素（与您在JSFIDLE中尝试做的差不多）
$(document).on("click", "p", function(){
  $(this).after("<p>Now Click Me...Another paragraph!</p>");
});