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

Question

一定有什么问题。我不知道什么？在 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/

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

Answer 4

“开”不是那样工作的。您在父元素上调用“on”，该父元素将动态附加子元素。在这种情况下，它将是身体。

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

Answer 5

On 将事件附加到被选择元素的后代。您正在附加到没有后代的 p 上，并且新添加的段落p插入在您在处理程序上添加的 p 标记之后，因此它不属于它（新添加的p不是您附加单击的p的后代上。

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

Selector 是第二个参数，用于过滤触发事件的选定元素的后代。如果选择器为空或省略，则事件总是在到达被选元素时触发

现场演示

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

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

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

​</p>

​</p>