jQuery event binding efficiency issue

Question

I have this [and more] very inefficient bit of click event binding code in my project and would like to find a way to make this faster, as I believe it is the cause of a lot of slowdown of my frontend. Would appreciate any tips on how to make this smoother so that it scales when there are more clickable events on the page.

Each of these events are bound to individual items when loaded and I know there must be a better more efficient way to bind the click events to the each of the elements within each item.

Thanks for any help.

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

frictionlesspulley · Accepted Answer · 2012-11-22 17:58:26Z

How about trying using a .on() on the parent container instead of attaching events to an individual DOM elements..on also takes care of attaching events to new child elements loaded later on as well.

in a simplified example

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

here instead of associating events like

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

I would add a class on the children

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

and attach a .on on the parent as

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

})

Check out this .

slowe · Accepted Answer · 2012-11-22 17:55:12Z

1

As a first, very quick, suggestion, you could chain your .unbind() and .bind() events so that the selector only has to be found once. e.g.

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

answered Nov 22, 2012 at 17:55

slowe

3361 silver badge5 bronze badges

Collectives™ on Stack Overflow

jQuery event binding efficiency issue

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related