jQuery动态元素 - 未应用样式

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

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

强制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");
});;