Question

我有3个带有jquery效果的框和一个当我点击“Click to create Jquery Box”时创建的框我的问题是当我使用.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

   .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 and a delegated event。

如果您的用例与您的问题use the :hover CSS pseudo-class中描述的一样，那么这是最佳选择。

Answer 2

如果您只是将悬停事件绑定到box类的元素，那么它将在那时处理DOM中的元素。然而，这不是一个实时绑定。您需要使用.on()。

示例：

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

Fixed fiddle

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

为什么jquery .html（）不接受jquery效果，我该如何解决它

4 个答案: