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()在父容器上使用 a 而不是将事件附加到单个 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>

并将 a 附加.on到父级上

$('#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 回答