0

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

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

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样式不适用于动态创建

我提前道歉，因为这可能是一个菜鸟问题，但它让我很难过，我将不胜感激。

-谢谢

4

4 回答 4

6

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

$(document).on('mouseover', 'p',  function () {       
 $(this).css("color", "red");
}).on('mouseout', 'p',  function () {       
 $(this).css("color", "black");
});;
于 2013-07-30T12:09:52.167 回答
1

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

$("p").on({
   mouseenter: function() 
   {
      //mouseover css
   },
   mouseleave: function()
   {
      //mouseleave css
   }
});
于 2013-07-30T12:09:09.063 回答
0

您可以完全使用 CSS 来实现悬停效果 --- 几乎总是更好的选择：

#p_wrap > p:hover
{
    color: red
}

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

$("button:nth-of-type(1)").on("click", function(){
    $("#p_wrap").append("<p>New Line</p>");
});
于 2013-07-30T12:15:40.070 回答
0

尝试将 css 用于这种类型的悬停效果。它不适用于 jquery 的原因是您没有使用.on().

小提琴演示

p:hover
{
    color:red
}
于 2013-07-30T12:06:17.693 回答