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

如何尝试在父容器上使用.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

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

})

结帐this。

Answer 2

作为第一个非常快速的建议，您可以链接.unbind（）和.bind（）事件，以便只需要找到一次选择器。 e.g。

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

jQuery事件绑定效率问题

2 个答案: