Question

I’m making my own function for the first time $.fn.testing = function(){....};

But i’m having a problem that I’m not able to solve yet. The next scenario isn’t smart, but It might happen, so that’s the reason why I want to fix it so the user doesn’t have to:

$('.target').testing("message" : "Hello!");
$('#test .target').testing("message" : "Hello world!");

The function will make the ‘message’ pop-up. So what the user wants here is that, for every .target there has to be an pop-upbox with “Hello!” and if this .target also has an id of #test then it should pop-up: “Hello world!”. But the problem is, that now the script will pop-up “Hello!” AND “Hello world!” when the .target#test is triggered.

So what I want in my function is that the function sees if the function is already called on this object, and if it is it has to .unbind() the previous function and then continues to add the function.

How can I achieve this? Hopefully my explanation is clear enough!

(The example above is a little bit simplified, so please don’t comment on the use of it)

Help is appreciated!

Answer 1

Here is how I would do this:

var _myFunction = function() {
  alert($(this).data("message"));
};

in plugin do something like this

jQuery.fn.testing = function(msg) {
    this
        .data("message", msg)
        .unbind('click', _myFunction)
        .bind('click', _myFunction);
};

EDIT: here is an example in jsfiddle