大量 dom 元素的问题答案

【问题标题】：Problem with big amount of dom elements大量 dom 元素的问题
【发布时间】：2011-07-13 11:07:26
【问题描述】：

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

【问题讨论】：

你能发布一些代码吗？这通常是一个很好的起点……

标签： javascript jquery

【解决方案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>"); 
}

【讨论】：

【解决方案2】：

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

例如：

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

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

【讨论】：

【解决方案3】：

由于您使用的是 jquery，因此通过在页面加载后加载元素，您需要将事件 "live" 传递给元素。

编辑：//我说的是绑定但想到了活，

让我们说所有元素都有一个名为“add”的类，只是为了让事情更简单。

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

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

【讨论】：

但是如何通过绑定添加悬停事件？

【解决方案4】：

一些快速的东西：

为什么你有双倍的for 循环而不是只有 1 个？
您应该看看 AlfonsoML 的建议，即先构建整个 HTML 字符串，然后将其插入 DOM。
尽管live 真的很方便，但我最常建议使用delegate。 $('#regions').delegate('li','click', function (e) { ... }) 之类的东西与 live 做同样的事情，并且在 DOM 上更干净。

【讨论】：