Question

I’m getting some weird thing happening with my javascript. I’m fetching data from the server side, and when the result come back, I update my div with the data in my table.
I then call postUpdate and bind a function to every rows in the table.

jQuery.fn.postUpdate = function(id) {
    console.log('postUpdate with id: '+id);
    if (id == "myContent") {
        jQuery('#DataTable tr').live(
                'click',
                function(event) {
                    jQuery.fn.showDetails(event);                        
        });
    }
};    

jQuery.fn.showDetails = function(event) {
    console.log(event);
};

However, everytime I click on the row, I’m getting the event printed twice?

Object { originalEvent=Event click, type="click", timeStamp=351233505, more...} base.js (line 181)
Object { originalEvent=Event click, type="click", timeStamp=351233505, more...} base.js (line 181)

What’s the deal here? Bug in jQuery?

Answer 1

Every time you call postUpdate, you add an additional live handler.

Once you’re using live, you should not re-add handlers every time you add elements, since the handlers will apply to all matching elements.