Does binding events to elements in jQuery multiple times have a knock on effect?

Question

If I have the below code, textboxes of class serial will be bound to the events more than once if the new serial button is pressed multiple times.

Will this hinder

Answer 1

You can bind multiple event handlers to a single element. The following would produce a button with two onclick events:

$("button").bind("click", myhandler);
$("button").bind("click", myhandler);

One option would be to unbind the events first:

$("button").unbind("click").bind("click", myhandler);
$("button").unbind("click").bind("click", myhandler);

This will result in only a single bound click event.

If you're rebinding the events because your form has dynamically added elements, then you might want to look into live() or the new on(), which can bind events to elements that might not yet exist. Example:

$("button").live("click", myhandler); // All buttons (now and in 
                                      // the future) have this handler.

In the Webkit Developer Tools (Safari and Chrome), you can see what events are bound to an element by inspecting it, then scrolling down in the right pane of the Elements panel. It's under a collapsable box named 'Event Listeners'. Firebug should have similar functionality.

Answer 2

Well i think this causes a lot of overhead and some problems because the events are binded more than once. Look at this simple fiddle: http://jsfiddle.net/nicolapeluchetti/syvDu/

<button id='newSerial'>Button</button>
<div class='serial'>Serial</div>
<div class='serial'>Serial</div>
<div class='serial'>Serial</div>

MonitorSerialTextBoxes();

$('#newSerial').click(function() {
    MonitorSerialTextBoxes();

});

function MonitorSerialTextBoxes() {
    $('.serial').each(function() {


        // Look for changes in the value
        $(this).bind("click", function(event) {
            alert("hi");
        });
    });
}

When you load the page a single alòert is displayed when you click on a div, but each time you press the button one more alert is displayed because a new event is attached