Function being called multiple times in jQuery plugin

Question

Excuse the title, didn't know how to describe it really, as I'm not sure what's happening:

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

If you look at that JS fiddle, I am attempting to create my own nudging control to understand how plugins work. My plugin is called by $("#textbox1").DTJS()

With one item on the page, my plugin seems to work ok, when I add multiple instances of it to the page, the code appears to be firing exponentially. (I'm basically waiting for a onClick event in my plugin).

As it is at the moment, I have called my $("#textbox1").DTJS() Three times like below:

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

If I click on the bottom one, it increments/deincremements by 1, if I click the middle it does it by 2, and if I click the top one it does it by 3.

Could someone please outline why this is happening?

Answer 1

You're applying your events via a class, so each time you call your plugin you're binding another event to all instances of .valueUp and .valueDown.

Consider keeping a copy when you create your buttons and binding the events from your stored copy. (If you're selecting the same element multiple times in the same scope you're better off storing it in memory.)

e.g.,

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

Also note that when jQuery calls a function from jQuery.fn, this refers to the jQuery object rather than raw elements so you don't need to do $(this).

Answer 2

just change this:

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

to this:

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

The same is true for .valueDown.

By binding an event to just .valueUp, you are binding it to any .valueUp on the page, which explains why the event gets bound 3 times on the first one and 2 times on the second one.

---

A couple of other tips:

• this is already a jQuery object

  As Snuffleupagus pointed out, this is already a jQuery object, so you don't need to call $(this). This is true for any function you add to $.fn.

• return this

  By returning this at the end of the plugin, you maintain chainability. For example, if you add return this to the end of your plugin, you could do something like this:

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