Javascript 多次将事件绑定到jQuery中的元素会产生连锁反应吗？

如果我有下面的代码，如果多次按下new serial按钮，serial类的文本框将不止一次绑定到事件

这会影响性能吗？或者即使多次调用bind方法，jQuery也只注册一次事件吗

$(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
         }
      });
    }

});

更新：我相信如果将下面的代码添加到MonitorSerialTextBoxes函数中，会解决问题吗？

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

从jQuery文档中：

---

如果注册了多个处理程序，它们将始终按照绑定顺序执行

您可以将多个事件处理程序绑定到单个元素。下面将生成一个包含两个onclick事件的按钮：

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

一种选择是首先解除事件绑定：

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

这将只导致一次绑定单击事件

如果由于表单动态添加了元素而重新绑定事件，则可能需要查看

live（）

或新的

on（）

，它们可以将事件绑定到可能不存在的元素。例如：

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

---

在Webkit开发工具（Safari和Chrome）中，您可以通过检查元素，然后在元素面板的右窗格中向下滚动，来查看绑定到元素的事件。它在一个名为“事件侦听器”的可折叠框下。Firebug应该具有类似的功能

我认为这会导致很多开销和一些问题，因为事件被绑定了多次。看看这个简单的小提琴：

按钮
电视连续剧
电视连续剧
电视连续剧
MonitorSerialTextBox（）；
$（'#newSerial'）。单击（函数（）{
MonitorSerialTextBox（）；
});
函数监视器SerialTextBox（）{
$（'.serial'）。每个（函数（）{
//查找值中的更改
$（this）.bind（“单击”），函数（事件）{
警报（“hi”）；
});
});
}

---

加载页面时，单击div时会显示一个警报，但每次按下按钮时会显示一个警报，因为附加了一个新事件

我不确定答案是否正确，但您可以使用可视事件自己进行测试。只需按照页面上的说明操作即可。如果您使用的是jQuery 1.7+版，则该方法不推荐使用（您提到过），但即使是从大约1.4+版开始，也建议使用它，而不是

.live（）

。

<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");
        });
    });
}