jQueryの要素へのバインディングイベントは何度も有効ですか？

Question

次のコードがある場合、新しいシリアルボタンが複数回押されると、serialクラスのテキストボックスがイベントに複数回バインドされます。

jQueryでは、バインドメソッドが何回も呼び出されても、イベントを1回だけ登録しますか？

$(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：私はそれがとてもMonitorSerialTextBoxes機能修正thiingsに以下のコードを追加するだろうと考えていますか？ jQueryのドキュメントから

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

：

複数のハンドラが登録さがある場合、彼らはいつもあなたがに複数のイベントハンドラをバインドすることができ

Answer 1

彼らがバインドされた順序で実行されます単一要素。 2つのonclickイベントでボタンを生成する次

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

一つの選択肢は、最初のイベントのバインドを解除するために、次のようになります。これは、単一のバインドされたクリックイベントになります

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

。

フォームに要素が動的に追加されたためにイベントを再バインドする場合は、まだ存在しない要素にイベントをバインドできるlive()または新しいon()を調べるとよいでしょう。例：Webkitの開発ツール（Safariとクローム）で

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

、あなたは要素パネルの右ペインでスクロールダウン、その後、それを検査することによって、要素にバインドされているイベントを見ることができます。それは 'Event Listeners'という折りたたみ可能なボックスの下にあります。 Firebugには同様の機能が必要です。

Answer 2

これは、イベントが複数回バインドされるため、オーバーヘッドが大きくなり、いくつかの問題が発生すると思います。あなたはdivの上でクリックしたときに、単一のalòertが表示されますが、新しいイベントが装着されているので、あなたは押すたびに、ボタン1つの以上のアラートが表示されたページをロードすると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"); 
     }); 
    }); 
} 

：この単純なフィドルを見てください