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 performance or does jQuery only register events once even if the bind method is called numerous times?

$(document).ready(function () {

    MonitorSerialTextBoxes();

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

       $.tmpl("productTemplate", mymodel).insertAfter($(".entry").last());
       MonitorSerialTextBoxes();

    });

    function MonitorSerialTextBoxes() {
      $('.serial').each(function () {
         // Save current value of element
         $(this).data('oldVal', $(this).val());

         // Look for changes in the value
         $(this).bind("propertychange keyup input paste", function (event) {

         // If value has changed...
         if ($(this).data('oldVal') != $(this).val() && $(this).val().length == 10) {

             // Updated stored value
             $(this).data('oldVal', $(this).val());

             // Do action
         }
      });
    }

});

UPDATE: I believe it will so would adding the below code to the MonitorSerialTextBoxes function fix thiings?

$('.serial').unbind("propertychange keyup input paste");

From the jQuery Documentation:

If there are multiple handlers registered, they will always execute in the order in which they were bound

Answer 1

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

Answer 2

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.