¿La vinculación de eventos a elementos en jQuery varias veces tiene un efecto knock-in?

Question

Si tengo el código siguiente, los cuadros de texto de la clase de la serie se vincularán a los eventos más de una vez si se presiona el nuevo botón de serie varias veces.

¿Esto obstaculizará el rendimiento o jQuery solo registra eventos una vez aunque se llame varias veces al método bind?

$(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: Creo que será así sería añadir el siguiente código para los thiings función f MonitorSerialTextBoxes?

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

de la documentación de jQuery:

Si hay varios controladores registrados, siempre se ejecutan en el orden en que fueron obligados

Answer 1

Puede enlazar varios controladores de eventos a una elemento único. La siguiente produciría un botón con dos eventos onclick:

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

Una opción sería para desenlazar los eventos en primer lugar:

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

Esto dará lugar a un único evento de clic encuadernado.

Si vuelve a vincular los eventos porque su formulario tiene elementos agregados dinámicamente, entonces puede consultar live() o el nuevo on(), que puede vincular eventos a elementos que quizás aún no existan. Ejemplo:

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

En las Herramientas para desarrolladores de Webkit (Safari y Chrome), se puede ver qué eventos están unidos a un elemento mediante la inspección que, a continuación, desplazarse hacia abajo en el panel derecho del panel Elementos. Está debajo de una caja colapsable llamada 'Escuchantes de eventos'. Firebug debería tener una funcionalidad similar.

Answer 2

Bueno, creo que esto causa una gran cantidad de sobrecarga y algunos problemas porque los eventos se combinan más de una vez. Mira este sencillo violín: 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"); 
     }); 
    }); 
} 

Cuando se carga la página se muestra un único alòert cuando se hace clic en un div, pero cada vez que se pulsa el botón se muestra uno más alerta debido a que un nuevo evento se adjunta