0

我正在<li>向<ul>.

以前，我在做类似的事情：

var playlistItemListUl = $('#PlaylistItemList ul');

for(var i = 0; i < 1000; i++ ){
    var listItem = $('<li/>', {
        'data-itemid': item.get('id'),
        contextmenu: function (event) {
            console.log('contextmenu', event);
        },
        click: function(event){
            console.log('click', event);
        }
    });

    listItem.appendTo(playlistItemListUl);
}

在本例中，listItem 的 click 和 contextmenu 事件成功写入 console.log。但是，它非常缓慢，我想减少批量添加引起的延迟。所以，我重写了代码，只修改了一个 DOM：

var playlistItemListUl = $('#PlaylistItemList ul');

var listItemsOuterHtml = [];

for(var i = 0; i < 1000; i++ ){
    var listItem = $('<li/>', {
        'data-itemid': item.get('id'),
        contextmenu: function (event) {
            console.log('contextmenu', event);
        },
        click: function(event){
            console.log('click', event);
        }
    });

    listItemsOuterHtml.push(listItem.prop('outerHTML'));
}

playlistItemListUl.append(listItemsOuterHtml.join(''));

这减少了所需的 DOM 操作的数量，但我所有精心绑定的 jQuery 事件都被丢弃了。

这两种风格之间是否有一个有效的中间地带，可以让我使用 jQuery 创建节点，而不是手工制作 HTML，但避免不必要的 DOM 插入？

4

2 回答 2

2

为什么不添加这些点击事件playlistItemListUl并让事件委托来处理事件呢？像这样 ：

playlistItemListUl.append(listItemsOuterHtml.join('')).on("click", "li", function(event) {
     console.log('click', event);
});

在这里，click事件将绑定到并且在单击它们时<ul/>将级联到。<li/>Andon是live,bind和的替代品delegate。而且，如果您要绑定多个事件，

playlistItemListUl.append(listItemsOuterHtml.join('')).on({
"click": function(event) {
     console.log('click', event);
 },
 "contextmenu" : function (event) {
     console.log('contextmenu', event);
 }
}, "li");

如果您希望它在当前设置中工作，您必须在 中发送元素listItemsOuterHtml，而不是outerHTML单独发送。

于 2013-07-24T16:34:12.120 回答
1

您将 outerHTML 推送到数组中，您应该存储 DOM 元素，而不是 HTML 字符串。

var playlistItemListUl = $('#PlaylistItemList ul'),
    listItems          = $([]);

for(var i = 0; i < 1000; i++ ){
    var listItem = $('<li/>', {
        'data-itemid': item.get('id'),
        contextmenu  : function (event) {
            console.log('contextmenu', event);
        },
        click: function(event){
            console.log('click', event);
        }
    });

    listItems = listItems.add(listItem);
}

playlistItemListUl.append(listItems);
于 2013-07-24T16:38:24.180 回答