被调用函数中多次jQuery插件

对不起标题，不知道如何真正形容它，因为我不知道发生了什么：被调用函数中多次jQuery插件

如果你看看这个JS小提琴，我试图创建我自己的轻推控制，以了解插件如何工作。我的插件被称为$("#textbox1").DTJS()

当页面上有一个项目，我的插件似乎工作正常，当我添加它的多个实例到页面时，代码似乎以指数形式发射。（我基本上是在等待我的插件中的onClick事件）。 1

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

如果我点击底部的一个，它递增/ deincremements，如果我点击它的中间：

因为它是在那一刻，我已经打电话给我$("#textbox1").DTJS()三次如下图所示它由2，如果我点击最上面的一个，它是由3做的。

请问有人可以概述为什么会发生这种情况吗？

来源

2013-04-16 JustAnotherDeveloper

检查这个拨弄拨弄工作http://jsfiddle.net/KpmyR/8/ – gaurav

这是实在没办法写一个适当的插件，你应该做的事情更多像这样[** Fiddle **]（http://jsfiddle.net/KpmyR/10/）!! – adeneo

@adeneo它看起来很整洁，我必须承认。另外我假设在线18上做回报是为了链接？所以我希望每个单独的实例都能在这里？ – JustAnotherDeveloper

只是改变这一点：

$('.valueUp').click(...);

这样：

$(this).siblings('.valueUp').click(...);

同样是真实的.valueDown。

通过将事件绑定到.valueUp，您可以将其绑定到页面上的任何.valueUp，这解释了为什么事件在第一个绑定了3次，第二个绑定了2次。

一对夫妇的其他提示：

this已经是一个jQuery对象

由于Snuffleupagus指出，this已经是一个jQuery对象，所以你不需要致电$(this)。对于添加到$.fn的任何功能都是如此。
回报this

通过在插件的最后返回this，你保持chainability。例如，如果将return this添加到插件的末尾，则可以执行下列操作：

$（“＃textbox1”）。DTJS（{'width'：'75px'，'max'：'15 '，'min'：'5'}）。fadeIn（）;

来源

2013-04-16 15:40:38 lbstr

这很好用。你介意解释这是为什么吗？我正在为了学习的目的而不是生产。我明显地认为它会有效地做到这一点：'点击 - >点击这个实例''而不是'点击 - >就好像所有的点击都一样' – JustAnotherDeveloper

当你说'$（'。valueUp'）。click（。 ..）'，你将一个click事件绑定到页面上所有具有'valueUp'类的元素，当你第一次调用你的插件时，页面上只有一个，第二次有两个，第一次事件绑定了两次，第三次有三次，所以第一次事件绑定了三次，你的点击处理程序每次被绑定时会被调用一次 – lbstr

通过说'$（this ）.siblings（'。valueUp'）。click（...）'，相对于你调用插件的元素而言，换句话说，你只将click事件绑定到'.valueUp'当前文本框的兄弟，这样，该事件只会被绑定一次，因此只会触发一次。 – lbstr

你正在通过一个类来应用你的事件，所以每次你打电话给你的插件，你都会绑定另一个事件到.valueUp和.valueDown的所有实例。

请考虑在创建按钮并从存储的副本中绑定事件时保留副本。（如果你在同一范围内多次选择相同的元素，你最好把它存储在内存中。）

例如，

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对象而不是原始元素，因此您不需要执行$(this)。

来源

2013-04-16 15:38:48 Snuffleupagus

我认为你所遇到的问题与Click事件处理程序：

$(".valueUp").click(function() {...})

是该行使用的选择器选择一类valueUp的所有元素。但是，当您向页面添加更多微调控件时，会为页面上的每个按钮运行事件处理程序 - 导致该值会随页面上的控件一样多。

有几个选项：

更改选择是基于ID的一个独特的ID，或使其相对于输入控件本身改变选择。

这里是一个的jsfiddle工作示例：http://jsfiddle.net/Xfp8a/

来源

2013-04-16 15:46:32

被调用函数中多次jQuery插件

回答

相关问题