CODEWITHSUNDEEP
jquery
lionysis
lionysis

Reputation: 237

jQuery event binding efficiency issue

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

Upvotes: 1

Views: 88

Answers (2)

frictionlesspulley
frictionlesspulley

Reputation: 12368

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 .

Upvotes: 2

slowe
slowe

Reputation: 336

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

Upvotes: 1

Related Questions