javascript - 使用 innerHTML 创建 div 后无法收听悬停(等)事件

Question

所以我用这个生成了一些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);
    });
});

Answer 1

每当我们从服务器端代码或客户端代码更新 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/

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