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

【问题标题】：How to change the background color of a dynamically created paragraph in jQuery?如何更改 jQuery 中动态创建的段落的背景颜色？
【发布时间】：2012-04-30 12:29:48
【问题描述】：

我希望用户能够单独使用 .hover() 段落（例如：“border: 1px solid #900;”）并能够单独单击它以添加/更改背景颜色（“选择段落”）并再次单击以返回默认背景颜色（“取消选择段落”）。这些段落是动态创建的，我很难得到它，因为我是 Javascript 和 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; }

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

【问题讨论】：

标签： javascript jquery dynamic

【解决方案1】：

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

这是您可以做的，将您的 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/

编辑

P.S 正如您所提到的，您是 jQuery 的新手，而且您似乎也是 stackoverflow 的新用户，我推荐您提出一个完美的问题。正确的代码示例，带有问题陈述的介绍和您自己努力的证明，以及最好的部分：一个 JSFiddle 链接，以便我可以检查我的答案是否正确。太好了:)

【讨论】：

【解决方案2】：

我已经修改了你的 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 开始使用 on() api.jquery.com/live As of jQuery 1.7, the .live() method is deprecated. Use .on() to attach event handlers. Users of older versions of jQuery should use .delegate() in preference to .live().
感谢 NiftyDude，实际上并没有意识到这一点。落后于我猜的时代。我阅读了更改并修改了我的原始语句以替换 live()。

【解决方案3】：

您可以将添加事件处理程序的选择器更改为包含元素 (.Test)，并将 p 标记提供给对 on 的调用：

$(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");  
    });
});

.on 与 .live 相似之处在于它可以有效地将事件处理程序附加到动态创建的元素上，但是它的效率要高得多，因为它不会将处理程序附加到根文档。下面是对 jQuery 1.7 中各种事件处理方法的解释（以及为什么以及如何使用 .on）：http://www.elijahmanor.com/2012/02/differences-between-jquery-bind-vs-live.html

【讨论】：

【解决方案4】：

这是我创建的小提琴：

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

希望这会有所帮助。

谢谢

阿尼尔班

【讨论】：