jQuery에서 중첩 된 클릭

Question

클릭하면 해당 DIV 내부에 다른 DIV가 추가됩니다. 그런 다음 새로 추가 된 DIV를 클릭하면 제거됩니다.

HTML

<div id="container"></div> 

jQuery를

$('#container').on('click', function(e){ 

    // Add other DIV 
    $(this).append('<div class="other">XYZ</div>'); 

    e.stopPropagation(); 

    // Remove other DIV 
    $('div.other').bind('click', function(event){ 

    $(this).remove(); 

    event.stopPropagation(); 

    }); 

}); 

어떻게 효율적으로 내가 아이 div를 많이해야 할 계획이 방법입니까?

Answer 1

다른 이벤트가 발생하면 이벤트를 첨부하면 의도하지 않은 부작용이 발생할 수 있으며 DOM에 메모리 누수가 발생할 수 있습니다.

일반적으로 처리기를 한 번 부착하고 자주 실행하십시오.

$(document) 
    .on('click', '#container', function(e) { 
     // Add other DIV 
     $(this).append('<div class="other">XYZ</div>'); 
    }) 
    .on('click', 'div.other', function(e) { 
     $(this).remove(); 
     e.stopPropagation(); 
    }); 

Answer 2

나는 약간 그래서 JQuery와 바꿀 것 당신은 .bind 대신으로 .Append의 선택 떨어져 체인 등을 CSTE 연구진 사용할 수 있습니다

$('#container').on('click', function(e){ 
    // Add other DIV 
    $(this).append(
     $('<div>').attr('class', 'other') 
      .html('XYZ') 
      // Remove other DIV 
      .on('click', function(event){ 
       $(this).remove(); 
       event.stopPropagation(); 
      }); 
    ) 
    e.stopPropagation(); 
}); 

그건 안된 코드,하지만 기능적이어야한다 너와 똑같아. 전체 DOM에서 이벤트가 발생하여 비효율적이므로 $ (document)에 대한 바인딩을 피할 것입니다. DOM 구문 분석은 자바 스크립트 코드 실행에서 가장 시간이 많이 소요되는 부분이므로 JQuery 선택기를 재사용하는 것이 더 효율적이기도하다.

Answer 3

많은 일을하지 않기 때문에 최적화가 필요하지 않을 것입니다. 당신이 바닐라 JS를 사용하지 않고 최적의을 수 있도록하려면하지만,이 같은 갈 것 :

var $myDiv = $('<div class="other">XYZ</div>'); //Cache the div instead of creating it every click 

$('#container').on('click', function(e){ 
    if($myDiv.is(e.target)) //Check if your div is the clicked target 
     $myDiv.remove(); //Remove the div 
    else 
     $myDiv.appendTo(this) // Else append the div. 
}); 

---

그냥 유의 div 어린이 요소를 포함 할 경우 if로 변경되어야한다 :

를

if($(e.target).closest($myDiv).length)