jQuery 이벤트 처리를 유지하면서 대량 항목을 DOM에 추가 하시겠습니까?

Question

<ul>에 일부 <li> 개의 요소를 추가하고 있습니다. 되는 listItem의 클릭과의 ContextMenu 이벤트가 성공적으로이 예에서 CONSOLE.LOG에 기록

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

:

이전에, 내가 좋아하는 일을하고 있었다. 그러나, 그것은 고통스럽게 느리고 벌크 - 추가에서 유도 지연을 줄이기 위해 싶었어요. 그래서, 난 그냥 하나의 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 모든 이벤트는 삭제됩니다.

HTML을 손으로 직접 만드는 대신 jQuery를 사용하여 노드를 만들 수 있지만 불필요한 DOM 삽입을 피할 수있는 효과적인 두 가지 스타일이 중간에 있습니까?

Answer 1

클릭 이벤트를 playlistItemListUl에 추가하고 이벤트 위임이 이벤트를 처리하게하는 이유는 무엇입니까? 이처럼 : 여기

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

click 이벤트는 <ul/>에 바인딩 될 것이다 그들이에 클릭 할 때 <li/>에 계단식 얻을 것이다. 그리고 on은 live, bind 및 delegate을 대체합니다. 여러 이벤트를 바인딩하는 경우 당신이 그것을이 현재 설치 작업을 원한다면,

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

, 당신은하지의 outerHTML 혼자 listItemsOuterHtml의 요소를 보내야합니다.

Answer 2

outerHTML을 배열로 푸시하면 HTML 문자열이 아닌 DOM 요소가 저장되어야합니다.

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);