2012-11-22 77 views
1

我在我的項目中使用了這個[和更多]效率非常低的點擊事件綁定代碼,並且希望找到一種方法使其更快,因爲我認爲這是導致很多速度減慢的原因我的前端。 希望得到關於如何使這個更平滑的任何提示,以便在頁面上有更多可點擊事件時進行縮放。jQuery事件綁定效率問題

這些事件中的每一個在加載時綁定到單個項目,我知道必須有一種更好的方法將點擊事件綁定到每個項目中的每個元素。

感謝您的任何幫助。

$(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"); 
    }); 

回答

1

作爲第一個,很快,建議,你可以鏈中的.unbind()和.bind()事件,以便選擇只需要進行一次發現。例如

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

如何嘗試在父容器上使用.on()而不是將事件附加到單個DOM元素。 .on還負責將事件附加到稍後加載的新子元素。

在一個簡單的例子

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

在這裏,而不是相關聯的事件,如

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

我想對孩子

<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 as

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

}) 

結賬this