Question

一定有问题。我不知道是什么？ see this on jsfiddle

/*
$("p").live("click", function(){
  $(this).after("<p>Another paragraph!</p>");
});
*/


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

我选择了jquery 1.7.2。并且live工作正常，但on未附加点击事件。根据jquery文档，on应该正常工作，因为live已被弃用。有什么想法吗？

Answer 1

您没有正确绑定on事件，您需要将其绑定到父

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

jsFiddle：http://jsfiddle.net/h75BD/2/

使用$('selector').on()语法绑定它与.click()完全相同，事件未被委托。如果您希望委派它（即实时），则需要使用$('parent').on('click', 'selector')语法。

Answer 2

在您的示例中，.on()效果很好。

但请记住，$(some_selector).live('click', function(){})不等于$(some_selector).on('click', function(){})，而是

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

Answer 3

您需要委托动态创建的元素。所以你应该使用这样的东西。 body可以替换为p

的任何父元素

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

http://jsfiddle.net/h75BD/1/

这样事件就会使父元素冒泡并在那里处理，因为当dom准备就绪时body存在。你这样做的方式只会附加到当dom准备就绪时那里的p元素。

Answer 4

“on”并不像那样。在父元素上调用“on”，子元素将动态附加到子元素。在这种情况下，它将是正文。

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

Answer 5

将事件附加到所选元素的后代。您将附加到 p 但没有后代且新添加 p 插入到您在处理程序上添加的p标记之后，因此它不属于它（新添加的 p 不是 p 的后代您附加的人点击开启。

要解释我的意思，将现有的 p 放入div中，新添加的 p 将是父div的后代，并且将附加到每个新添加的 p ，它是id为div1的div的后代。

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

时触发

<强> Live Demo

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

或者您可以将其放在文档上以附加点击添加到文档的每个元素。

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

Jquery“live”很好，但“on”不在jsfiddle上

5 个答案: