javascript - 函数在 jQuery 插件中被多次调用

Question

请原谅标题，我真的不知道如何描述它，因为我不确定发生了什么:

http://jsfiddle.net/KpmyR/7/

如果您查看那个 JS fiddle，我正在尝试创建我自己的轻推控件以了解插件的工作原理。我的插件由 $("#textbox1").DTJS()

调用

对于页面上的一个项目，我的插件似乎工作正常，当我将它的多个实例添加到页面时，代码似乎呈指数级触发。 (我基本上是在等待插件中的 onClick 事件)。

目前，我已经调用了我的 $("#textbox1").DTJS() 三次，如下所示:

$(document).ready(function () {
$("#textbox1").DTJS({
    'width': '75px',
    'max': '15',
    'min': '5'
});

$("#textbox2").DTJS({
    'width': '75px',
    'max': '15',
    'min': '5'
});


$("#textbox3").DTJS({
    'width': '75px',
    'max': '15',
    'min': '5'
});
});

如果我点击底部的，它会递增/递减 1，如果我点击中间的，它会递增 2，如果我单击顶部的，它会递增 3。

有人可以概述为什么会这样吗？

Answer 1

您通过一个类应用您的事件，因此每次调用您的插件时，您都将另一个事件绑定(bind)到 .valueUp 和 .valueDown 的所有实例。

在创建按钮并绑定(bind)存储副本中的事件时，请考虑保留一份副本。 (如果您在同一范围内多次选择同一元素，最好将其存储在内存中。)

例如，

var up = $('<button class="valueUp valueHoldDown btn-mini btn-primary' + settings.btnClass + '">-></button>');
this.after(up);
up.click(function(){ 
    // code 
});

另请注意，当 jQuery 从 jQuery.fn 调用函数时，this 引用 jQuery 对象而不是原始元素，因此您无需执行 $(这个)。