Gli eventi vincolanti per elementi in jQuery più volte hanno un effetto knock-on?

Question

Se si dispone del seguente codice, le caselle di testo di serie seriali verranno associate agli eventi più di una volta se il nuovo pulsante seriale viene premuto più volte.

Questo ostacolerà le prestazioni o jQuery registrerà gli eventi una sola volta anche se il metodo di bind viene chiamato più volte?

$(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: credo che sarà così sarebbe aggiungendo il codice sottostante per i thiings funzione FIX MonitorSerialTextBoxes?

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

dal disco della documentazione jQuery:

Se ci sono più gestori registrati, saranno sempre eseguiti nell'ordine in cui sono stati legati

Answer 1

È possibile associare più gestori di eventi a un elemento singolo. La seguente produrrebbe un pulsante con due eventi OnClick:

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

Una possibilità sarebbe quella di separare gli eventi prima:

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

Questo si tradurrà in un solo evento click legato.

Se si esegue nuovamente l'associazione degli eventi perché il modulo ha aggiunto elementi in modo dinamico, è possibile esaminare live() o il nuovo on(), che può associare eventi a elementi che potrebbero non esistere ancora. Esempio:

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

negli strumenti di Webkit Developer (Safari e Chrome), è possibile vedere quali eventi sono legati a un elemento controllando, poi scorrendo verso il basso nel riquadro destro del pannello Elementi. È sotto una scatola pieghevole denominata "Event Listener". Firebug dovrebbe avere funzionalità simili.

Answer 2

Beh, penso che questo causi un sacco di spese generali e alcuni problemi perché gli eventi sono vincolati più di una volta. Guardate questa semplice violino: 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"); 
     }); 
    }); 
} 

Quando si carica la pagina di un singolo alòert viene visualizzata quando si fa clic su un div, ma ogni volta che si preme il pulsante di un altro avviso viene visualizzato perché un nuovo evento è collegato