jquery - 为什么 jquery .html() 不接受 jquery 效果，我该如何解决

Question

我有 3 个带有 jquery 效果的框和一个在单击“单击以创建 Jquery 框”时创建的框

演示 http://jsfiddle.net/afshinprofe/f9s6X/

HTML

    <h2>Click to Add JQuery Box</h2>
<div class="box">Html Box 1</div>
<div class="box">Html Box 2</div>
<div class="box">Html Box 3</div>
<div id="res"></div>

CSS

   .box{
    width:50px;
    height:50px;
    background-color:gray;
    color:white;
    float:left;
    border:medium blue solid;
    margin:10px;
   }

jQuery

$("h2").click(function(){
    $("#res").html('<div class="box">JQuery Box 4</div>');
});
$(".box").hover(function () {
$(this).css("color","red");},
function(){
$(this).css("color","white");
});

Answer 1

你必须打电话.hover给新盒子。最初调用它时，那个新盒子并不存在。

或者，您可以使用.on和委托事件。

最好的替代方法是，如果您的用例确实如您的问题中所述，请使用:hoverCSS 伪类。

Answer 2

如果您只是将悬停事件绑定到 box 类的元素上，那么它将作用于当时 DOM 中的元素。但是，它不是实时绑定。您需要为此使用.on()。

例子：

$("body").on('mouseenter', '.box', function () {
    $(this).css("color","red");
}).on('mouseleave', '.box', function(){
    $(this).css("color","white");
});

固定小提琴

Answer 3

那么你可以这样做:) 诀窍是将你的代码放在“点击”函数中。

$("h2").click(function(){
$("#res").html('<div class="box">JQuery Box 4</div>');

$(".box").hover(function () {
$(this).css("color","red");},
function(){
$(this).css("color","white");
});
});

Answer 4

可以试试类似的

$("h2").click(function(){
    var $box = $('<div class="box">JQuery Box 4</div>')
      .hover(function () {
        $(this).css("color","red");},
      function(){
        $(this).css("color","white");
    });
    $("#res").empty().append($box);
});