[英]Does binding events to elements in jQuery multiple times have a knock on effect?
如果我有下面的代码,如果多次按下新的串行按钮,类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函数修复thiings?
$('.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()
或new on()
,它可以将事件绑定到可能尚不存在的元素。 例:
$("button").live("click", myhandler); // All buttons (now and in
// the future) have this handler.
在Webkit开发人员工具(Safari和Chrome)中,您可以通过检查元素来查看绑定到元素的事件,然后在“元素”面板的右窗格中向下滚动。 它位于一个名为“Event Listeners”的可折叠盒子下面。 Firebug应该具有类似的功能。
嗯,我认为这会导致很多开销和一些问题,因为事件被绑定了不止一次。 看看这个简单的小提琴: 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");
});
});
}
当您加载页面时,单击div时会显示一个alòert,但每次按下该按钮时都会显示另一个警报,因为附加了一个新事件
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.