Very simple jquery custom function throws error

Question

I have the following code:

$(document).ready(function() {
    $.fn.addRemoveButton = function() {
        alert(1);
    };

    $.addRemoveButton();
});

And I get the following error message from firebug:

TypeError: $.addRemoveButton is not a function $.addRemoveButton();

Why and how can I fix this?

Answer 1

You need to define a selector, try this:

$(document).ready(function() {
    $.fn.addRemoveButton = function() {
        alert(1);
    };

    $(document).addRemoveButton();
});

Here is working jsFiddle.

Answer 2

You need to apply that to any DOM.

Example

jQuery Code

$(function()
{
    $.fn.addRemoveButton = function() {
        alert(1);
    };
    $('#letit').addRemoveButton();
});

HTML Code

<div id="letit"></div>

Answer 3

or, you can create it as a jQuery global function:

$(document).ready(function() {
    $.addRemoveButton = function() { // removed the .fn
        alert(1);
    };

    $.addRemoveButton();
});

This binds the function to the jQuery object, where you can then use it like in your original example.

See this post for the difference between jQuery.fn.method and jQuery.method