1

私のプロジェクトには、この [およびその他の] 非常に効率の悪いクリック イベント バインディング コードがあり、これを高速化する方法を見つけたいと考えています。ページにクリック可能なイベントが増えたときにスケーリングするように、これをよりスムーズにする方法に関するヒントをいただければ幸いです。

これらの各イベントは、読み込まれたときに個々のアイテムにバインドされます。クリック イベントを各アイテム内の各要素にバインドするには、より効率的な方法が必要であることがわかっています。

助けてくれてありがとう。

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

2 に答える 2

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親にa を次のようにアタッチします

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

})

これをチェックしてください。

于 2012-11-22T17:58:26.280 に答える
1

最初の非常に簡単な提案として、.unbind() および .bind() イベントをチェーンして、セレクターを一度だけ見つける必要があるようにすることができます。例えば

$(self.colBodySelection + " #post_body_" + sItemId).unbind().click(function(){   
    //self.fnPostSelect();
});
于 2012-11-22T17:55:12.390 に答える