jQuery事件绑定(bind)效率问题

Question

我的项目中有这个[以及更多]非常低效的点击事件绑定(bind)代码，并且希望找到一种方法来使其更快，因为我相信这是我的前端速度大幅减慢的原因。 如果有任何有关如何使其更平滑的提示，以便在页面上有更多可点击事件时进行扩展，我们将不胜感激。

这些事件中的每一个在加载时都绑定(bind)到单独的项目，我知道必须有一种更好更有效的方法将点击事件绑定(bind)到每个项目中的每个元素。

感谢您的帮助。

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

如何尝试在父容器上使用 .on() 而不是将事件附加到单个 DOM 元素。.on 还负责将事件附加到新的 DOM 元素子元素也会稍后加载。

在一个简化的示例中

<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

我会为 children 添加一个类(class)

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