1

所以我使用这个生成了一些 div

document.getElementById('container').innerHTML += '<div class="colorBox" id="box'+i+'"></div>';

我遇到的问题是捕捉悬停事件

$(".colorBox").hover(function(){
    alert("!");
});

做了之后就不行了。有什么想法吗？

编辑：为了更清楚，请查看： http: //graysonearle.com/test/16_t.html

我需要能够在更改动态多次发生的 innerHTML 后发生悬停事件。所以就像在改变列数之后，悬停效果需要起作用。

感谢选择的答案：对于那些将来可能想做类似事情的人，我的代码现在看起来像这样：

$(document).ready(function(){

    document.body.onmousedown = function() { 
      ++mouseDown;
    }
    document.body.onmouseup = function() {
      --mouseDown;
    }

    $(document).on("mouseenter",".colorBox",function(){
        if(mouseDown){
            var clicked = $(this).attr("id");
            var clicked = clicked.substring('box'.length);
            next_color(clicked);
        }       
        $(this).css("border-color","#ff0");
        }).on("mouseleave", ".colorBox", function() {
        $(this).css("border-color","#aaa");
    });

    $(document).on("click",".colorBox",function(){
        var clicked = $(this).attr("id");
        var clicked = clicked.substring('box'.length);
        next_color(clicked);
    });
});
4

3 回答 3

4

每当我们从服务器端代码或客户端代码更新 DOM 时。对于 EX。我们正在更新的 DIV，如果我们加载部分数据，它将不适用于我们之前加载的事件。

所以对于这个在文档准备好的代码中是这样的。如果您使用的是 jquery 1.7+，那么代码如下

$(document).on("hover",".colorBox",function(){
    alert("Hi it will load after partial div update as well");
});

$(document).delegate(".colorBox","hover",function(){
    alert("Hi it will load after partial div update as well");
});

如果您使用的是 jquery 1.6 或更低版本，那么。

然后使用

$(".colorBox").live("hover",function(){
    alert("Hi it will load after partial div update as well");
});

http://oscarotero.com/jquery/

如果这对您有帮助，请标记为答案。

于 2013-02-27T00:07:57.143 回答
1

首先，当您使用 jQuery 时，您的第一个代码可以使用以下函数进行简化。

$('#container').append('<div class="colorBox" id="box'+i+'"></div>');

其次，我认为这是因为您尚未声明悬停功能。

 $(".colorBox").hover(
       function(){
          alert("On");
       }
    );

工作小提琴

于 2013-02-26T23:59:20.157 回答
0

您必须在注入 div 后调用悬停代码。Jquery 不会自动监听 dom 的变化，所以如果你把所有的 colorBoxes 都挂进去$(document).ready(){...}，然后插入一个新的 div，什么都不会发生。

所以这很好用：

$(document).ready(function(){
    for(i=0; i<5; i++) {
        document.getElementById('container').innerHTML += '<div class="colorBox" id="box'+i+'"></div>';
    }
    $(".colorBox").hover(function(){
        alert("!");
    });
}
于 2013-02-27T00:00:58.270 回答