Question

我有DOM元素的问题我需要添加2000个块。我尝试通过setTimeout执行此操作，但随后事件不使用此元素。我有什么错误吗？

function init(){ 
    $('#regions').prepend("<ul></ul>"); 
    setTimeout(function(){ 
        var opt=$('#regions ul'); 
        for(var i=0; i<50; ++i){ 
            for(var j=0; j<50; ++j) 
                opt.append('<li class=\"field\"></li>'); 
        } 
    }, 0); 
}

Answer 1

首先构建要插入的完整HTML，然后在一次操作中完成。

function init(){ 
    var html =[];
    for(var i=0; i<50; ++i){
       for(var j=0; j<50; ++j)
           html.push('<li class=\"field\"></li>');
    } 

    $('#regions').prepend("<ul>" + html.join('') + "</ul>"); 
}

Answer 2

因为您正在使用jquery，所以通过在页面加载后加载元素，您需要"live"事件到元素。

编辑：//我说绑定但想到了现场，

假设所有元素都有一个名为“added”的类，只是为了让事情更简单。

然后你可以通过执行以下操作来绑定悬停事件：

$(".added").live("mouseover",function(){
//do stuff
});

Answer 3

您可以使用jQuery的live方法。借助它的帮助，您可以将事件绑定到元素集，即使它们可能会在以后添加。

例如：

$('#regions ul li').live('mouseover', function() {
  // Live handler called.
});

在此处查看更多信息：http://api.jquery.com/live/

Answer 4

一些快速的东西：

为什么你的for循环加倍而不只是1？
您应该先看看AlfonsoML建议首先构建整个HTML字符串，然后将其插入DOM中。
尽管live非常方便，但我总是建议使用delegate。像$('#regions').delegate('li','click', function (e) { ... })这样的东西与live的作用相同，并且在DOM上更清晰。

有大量dom元素的问题

4 个答案: