Các sự kiện liên kết với các phần tử trong jQuery có nhiều lần có hiệu ứng gõ không?

Question

Nếu tôi có mã bên dưới, các hộp văn bản của lớp học nối tiếp sẽ bị ràng buộc với các sự kiện nhiều lần nếu nút nối tiếp mới được nhấn nhiều lần.

Điều này sẽ cản trở hiệu suất hay jQuery chỉ đăng ký các sự kiện một lần ngay cả khi phương thức liên kết được gọi nhiều lần?

$(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: Tôi tin rằng nó sẽ như vậy sẽ thêm mã dưới đây để các thiings chức năng sửa chữa MonitorSerialTextBoxes?

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

Từ Documentation jQuery:

Nếu có nhiều bộ xử lý đăng ký, họ sẽ luôn luôn thực hiện theo trình tự, trong đó họ bị trói

Answer 1

Bạn có thể liên kết nhiều xử lý sự kiện cho một một phần tử. Sau đây sẽ tạo ra một nút với hai sự kiện onclick:

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

Một lựa chọn sẽ được unbind sự kiện đầu tiên:

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

này sẽ cho kết quả chỉ trong một sự kiện click ràng buộc duy nhất.

Nếu bạn đang khôi phục sự kiện vì biểu mẫu của bạn có các yếu tố được thêm động, thì bạn có thể muốn xem xét live() hoặc on() mới, có thể liên kết sự kiện với các yếu tố chưa tồn tại. Ví dụ:

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

Trong Công cụ nhà phát triển Webkit (Safari và Chrome), bạn có thể thấy những sự kiện đang bị ràng buộc để một yếu tố bằng cách kiểm tra nó, sau đó di chuyển xuống ở khung bên phải của bảng Elements. Nó nằm dưới một cái hộp có thể thu gọn tên là 'Người nghe sự kiện'. Firebug nên có chức năng tương tự.

Answer 2

Tôi nghĩ điều này gây ra rất nhiều chi phí và một số vấn đề vì các sự kiện được liên kết nhiều lần. Nhìn vào fiddle này đơn giả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"); 
     }); 
    }); 
} 

Khi bạn tải trang một alòert duy nhất được hiển thị khi bạn bấm vào một div, nhưng mỗi lần bạn nhấn vào nút thêm một cảnh báo được hiển thị bởi vì một sự kiện mới được gắn