jQuery动态元素 – 未应用样式

我有2个Button ，当点击时，添加一个新段落或删除当前段落。 这是使用jQuery完成的。 我还使用jQuery在hover将段落文本的颜色从黑色更改为红色。 我遇到的问题是，在使用jQuery添加新段落后，hover效果未应用于它。 它适用于原始段落，但不适用于动态创建的段落。

当我查看页面的source code时，我看到原始段落应用了内联样式，但不是我通过jQuery添加的样式。 我一直在网上寻找最后一小时试图寻找解决方案但到目前为止没有一个对我有用。 我发现了一些类似的问题，但解决方案要么对我不起作用，要么我没有正确应用它们。 问题是我几个小时前开始学习jQuery ，因此不能确定我是在修复某些东西还是让它变得更糟。 此外，我所看到的大部分问题都与jQuery Mobile有关，当我在PC上工作时，这让我更加困惑。

http://jsfiddle.net/2Xh75/

HTML

 Add line Remove line 
 
 Original Line 
 
 Original Line 
 
 Original Line 
  

jQuery的

 $(document).ready(function(){ //Add line $("button:nth-of-type(1)").click(function(){ $("#p_wrap").append("
New Line
"); }); //Remove line $("button:nth-of-type(2)").click(function(){ $("p:last-of-type").remove(); }); //Hover effect $("p").hover( function(){ $(this).css("color", "red"); }, function(){ $(this).css("color", "black"); } ); }); // Document Ready End 

以下是我已经看过的一些问题：

强制jQuery Mobile重新评估动态插入内容的样式/主题

动态添加内容后，jQuery Mobile不会应用样式

jquery样式未应用于动态创建

我提前道歉，因为这可能是一个noob问题，但它让我难过，我会感激任何帮助。

-谢谢

Answer 1

您应该使用.on ，因为它将绑定您将在DOM中动态追加的新元素

 $(document).on('mouseover', 'p', function () { $(this).css("color", "red"); }).on('mouseout', 'p', function () { $(this).css("color", "black"); });; 

Answer 2

当您为“p”定义jQuery选择器时，您选择的元素不存在，您应该使用“on”函数：

 $("p").on({ mouseenter: function() { //mouseover css }, mouseleave: function() { //mouseleave css } }); 

Answer 3

尝试将css用于此类hover效果。 它不适用于jquery的原因是因为您没有使用.on()将事件委托给父.on() 。

小提琴演示

 p:hover { color:red } 

Answer 4

你可以纯粹用CSS做hover效果—几乎总是更好的选择：

 #p_wrap > p:hover { color: red } 

另外，我建议使用更新的首选语法重构点击处理程序：

 $("button:nth-of-type(1)").on("click", function(){ $("#p_wrap").append("
New Line
"); });