如何更改jQuery中动态创建的段落的背景颜色？

问题描述：

我希望用户能够单独使用（例如：“border：1px solid＃900;”）.hover（）段落，并且还可以单独单击它以添加/更改背景色（“选择段落“）并再次单击以返回默认背景色（”变体段落“）。这段文字是动态创建的，因为我是Javascript和jQuery的新手，所以我很难得到它。如何更改jQuery中动态创建的段落的背景颜色？

http://jsfiddle.net/RzvV5/8/

这是代码即时通讯与合作：

jQuery 

$(document).ready(function(){ 
$("#push").on({ 
    click: function(){ 
     var pr = $('<p class="test">Test</p>'); 
     var d = $(".Test"); 
     $(pr).clone().appendTo(d); 
    } 
}); 

$("p").on({ 
      mouseenter: function(){  
        $(this).addClass("inside"); 
      }, 
      mouseleave: function(){        
        $(this).removeClass("inside"); 
} 

}); 



});

HTML代码：

<html> 
<body> 
    <a href="#" id="push">Push</a> 
<div class="Test"></div> 
    </body> 
</html>

CSS代码：

.test { color: #000; padding: .5em; border: 1px solid black;} 
.active { background-color: ;} 
.inside { background-color: #900; }

这段代码只是我试图完成的一个例子。任何帮助将不胜感激！

答

所以这里发生的是，在你的代码中，你定义了一个函数来创建一个段落，然后设置它的属性。请注意，你'定义了一个函数'。仅此而已，没有任何段落。因此，当您为所有段落设置事件处理程序时，它并不重要，因为您关心的段落还不存在。

这是你能做什么，你的jQuery部分更改为：远一点

$(document).ready(function(){ 
    $("#push").on({ 
     click: function(){ 
      var pr = $('<p class="test">Test</p>'); 
      var d = $(".Test"); 
      var pclone = $(pr).clone(); 
      pclone.on({ 
       mouseenter: function(){  
        $(this).addClass("inside"); 
       }, 
       mouseleave: function(){        
        $(this).removeClass("inside"); 
       } 
      }); 
      pclone.appendTo(d); 
     } 
    }); 
});

我编辑了自己的jsfiddle为你检查出的结果：http://jsfiddle.net/RzvV5/16/

编辑

PS正如你所说，你是jQuery的新手，你似乎也是一个新的用户，以stackoverflow，我赞扬你完美sked问题。正确的代码示例，带有问题陈述的介绍和自己努力的证明，以及最好的部分：JSFiddle链接，以便我可以检查我的答案是否正确。伟大去:)

答

我已经修改了你的JQuery代码，你应该能够复制粘贴它，并试试看。这很丑陋，但我很快写下来了。基本上，点击它会产生一个带有红色背景的段落。当你点击它时，它变成蓝色。如果再次点击它会变成红色。代码相当自我解释。希望有所帮助！

$(document).ready(function(){ 
    $("#push").on({ 
     click: function(){ 
      $('<p>Test</p>').css("background-color","red").appendTo('.Test'); 
     } 
    }); 

$('.Test').on("click", "p", function(){ 
    var cur = $(this).css('background-color'); 
    if(cur=="rgb(255, 0, 0)") { 
     $(this).css("background-color","blue"); 
    } else {      
     $(this).css("background-color","red"); 
    } 
    }); 
});

编辑：替代使用.live（），不建议使用.live（）。

'活（）'已过时，在使用'（）'为1.7.1 http://api.jquery.com/live/'在jQuery 1.7， .live（）方法已被弃用。使用.on（）附加事件处理程序。老版本的jQuery用户应该优先使用.delegate（），而不是.live（）。' – 2012-04-19 02:28:07

感谢NiftyDude，实际上并没有意识到这一点。我猜测时代背后。我阅读了这些更改并修改了我原来的声明以替换live（）。 – Johnnyoh 2012-04-19 02:44:44

：D至少你现在知道了:) – 2012-04-19 02:46:36

答

您可以更改您的事件处理程序添加到以包含元素（。测试）的选择，并提供p标签来调用上：

$(document).ready(function(){ 
    $("#push").on({ 
     click: function(){ 
      var pr = $('<p class="test">Test</p>'); 
      var d = $(".Test"); 
      $(pr).clone().appendTo(d); 
     } 
    }); 

    $(".Test").on("mouseenter", "p", function(){  
     $(this).addClass("inside"); 
    }); 
    $(".Test").on("mouseleave", "p", function(){        
     $(this).removeClass("inside"); 
    }); 
});

。对类似。居住在它可以有效地将事件处理程序附加到动态创建的元素，但它更有效率，因为它没有将处理程序附加到根文档。下面是事件的各种方法中的jQuery 1.7处理的解释（与原因，并沿着你应该如何使用。对）：http://www.elijahmanor.com/2012/02/differences-between-jquery-bind-vs-live.html

答

这里是我创建的小提琴：

http://jsfiddle.net/RzvV5/80/

希望这有助于。

感谢

Anirban

如何更改jQuery中动态创建的段落的背景颜色？

相关推荐