Question

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

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

http://jsfiddle.net/2Xh75/

HTML

<button>Add line</button>
<button>Remove line</button>

<div id="p_wrap">
    <p> Original Line </p>
    <p> Original Line </p>
    <p> Original Line </p>
</div>

的jQuery

$(document).ready(function(){

    //Add line   
    $("button:nth-of-type(1)").click(function(){
        $("#p_wrap").append("<p>New Line</p>");
    });

    //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

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

Forcing jQuery Mobile to re-evaluate styles/theme on dynamically inserted content

jQuery Mobile does not apply styles after dynamically adding content

jquery styles not applied in dynamically creation

我提前道歉，因为这可能是一个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用于此类悬停效果。它不能与jquery一起使用的原因是你没有使用.on()将事件委托给父母。

Fiddle Demo

p:hover
{
    color:red
}

Answer 4

你可以完全用CSS做悬停效果---几乎总是更好的选择：

#p_wrap > p:hover
{
    color: red
}

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

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

jQuery动态元素 - 未应用样式

4 个答案: