爲什麼jQuery的.html（）不接受jQuery的效果，我該如何解決它

我有3個框jquery效果和一個框創建時，我點擊「點擊創建jquery框」我的問題是當我創建jquery以.html（）方法創建新盒包裝盒不接受像其他HTML盒爲什麼jQuery的.html（）不接受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

jQuery的效果

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

來源

2012-09-22 Afshin

+1有用的問題。如此多的答案投票。什麼是沒有問題的答案.... – Nope

如果您只是將懸停事件綁定到box類的元素上，它將對當時DOM中的元素起作用。但它不是一個活動綁定。你需要使用.on()。

例子：

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

Fixed fiddle

來源

2012-09-22 14:11:16 Asciiom

+1。作爲OP的一個側面說明：如果你希望它更短，你可以使用：$（「body」）。on（「hover」，「.box」，function（）{$（this）.toggleClass 「over」）;}）;'帶一個額外的CSS類：'.over {color：red; }'相同的結果，更少的代碼，從代碼和CSS分離的樣式定義很容易被改變，而沒有更改代碼的風險。 – Nope

沒錯，只是說明了這裏的方法:)謝謝！ – Asciiom

@FrançoisWahl由於jQuery 1.8使用懸停作爲字符串「mouseenter mouseleave」的縮寫，因此已棄用。 http://api.jquery.com/on/#additional-notes – undefined

你將不得不調用.hover在新的方塊。這個新盒子在第一個叫它時並不存在。可以使用。

最好的選擇，但如果你的用例真的如你的問題use the :hover CSS pseudo-class所述。

來源

2012-09-22 14:08:34 Brad

布拉德使用'.on（）'發佈的技術演示 - http://jsfiddle.net/f9s6X/3/ – techfoobar

我想使用JQuery而不使用CSS – Afshin

@ afshin，你讀過我的文章了嗎？我給了你幾個選擇。 techfoobar發佈了一個很好的例子。 – Brad

那麼你可以做這樣的:) 訣竅是把你的代碼中的「點擊」功能。

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

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

來源

2012-09-22 14:13:56

你可以嘗試類似的東西，

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

來源

2012-09-22 14:24:12 Jashwant

爲什麼jQuery的.html（）不接受jQuery的效果，我該如何解決它

回答

相關問題