jQuery 이벤트 바인딩 효율성 문제

Question

내 프로젝트에서 클릭 이벤트 바인딩 코드가 매우 비효율적이며 매우 빠르며, 속도를 많이 높이는 방법을 찾고 싶습니다. 내 프론트 엔드의. 페이지에서 더 많은 클릭 이벤트가있을 때 크기를 조정할 수 있도록 더 매끄럽게 만드는 방법에 대한 조언을 주시면 감사하겠습니다.

이러한 이벤트는로드 될 때 개별 항목에 바인딩되며, 클릭 이벤트를 각 항목 내의 각 요소에 바인딩하는 더 효율적인 방법이 있어야한다는 것을 알고 있습니다.

도움 주셔서 감사합니다. 셀렉터를 한 번만 찾을 수 가질 수 있도록

$(self.colBodySelection + " #post_dm_" + sItemId).unbind(); 
    $(self.colBodySelection + " #post_dm_" + sItemId).click(function(){ 
     var sResponseType = $(this).attr("response_type"); 
     self.fnRespond(sItemId, sResponseType); 
    }); 

    $(self.colBodySelection + " #post_body_" + sItemId).unbind(); 
    $(self.colBodySelection + " #post_body_" + sItemId).click(function(){ 
     //self.fnPostSelect(); 
    }); 

    $(self.colBodySelection + " #select_" + sItemId).unbind(); 
    $(self.colBodySelection + " #select_" + sItemId).click(function(){ 
     self.fnPostSelect(1, sItemId); 
    }); 

    $(self.colBodySelection + " #poster_" + sItemId).unbind(); 
    $(self.colBodySelection + " #poster_" + sItemId).click(function(){ 
     self.fnLoadUserColumn();  
     $(self.colBodySelection + " #settings_box_" + sItemId).slideUp("fast"); 
     $(self.colBodySelection + " #history_" + sItemId).slideUp("fast"); 
     $(self.colBodySelection + " #respond_"+sItemId).slideUp("fast"); 
     $(self.colBodySelection + " #assign_box_" + sItemId).slideUp("fast"); 
    }); 

Answer 1

는 첫째, 매우 빠른, 제안, 당신은 당신의 .unbind()와 .bind() 이벤트를 체인 수 있습니다. 예 :

$(self.colBodySelection + " #post_body_" + sItemId).unbind().click(function(){ 
    //self.fnPostSelect(); 
}); 

Answer 2

이벤트를 개별 DOM 요소에 연결하는 대신 부모 컨테이너에서 .on()을 사용해 보시는 것은 어떻습니까? .on도 나중에로드 된 새 하위 요소에 이벤트를 첨부합니다.

$('#child-01').click 
$('#child-02').click 
$('#child-03').click 
$('#child-04').click 

같은

단순화 된 예에서

여기

<div id="parent"> 
    <div id="child-01">Child 01</div> 
    <div id="child-02">Child 01</div> 
    <div id="child-03">Child 01</div> 
    <div id="child-04">Child 01</div> 
</div> 

대신 관련 이벤트 나는 아이들

<div id="parent"> 
    <div id="child-01" class="child">Child 01</div> 
    <div id="child-02" class="child">Child 01</div> 
    <div id="child-03" class="child">Child 01</div> 
    <div id="child-04" class="child">Child 01</div> 
</div> 

에 클래스를 추가하고 부모에 .on을 첨부 할 것 예 :

$('#parent').on('click','.child', function(){ 
    //do whatever!! 

}) 

체크 아웃 this.