How do you create a jQuery plugin?

Question

I have the following code, which I am following from the jQuery documentation on how to build a plugin.

I'm just trying to create a simple isNot extension:

(function ($) {
    $.fn.isNot = function (selector) {
        return !this.is(selector);
    };
})(jQuery);

$(document).ready(function () {
    $("#someButton").click(function (event) {
        alert($("#someCheckbox").isNot(":checked"));           
    });
});

When I run this the javascript file get's loaded properly, and I can step through the code in firebug. I see that jQuery is defined properly, and the click event gets wired up properly, too.

However, I have added a watch in FireBug to track the isNot function, and it is always null. I can't get it to ever become defined.

Is there something I'm not doing properly?

Answer 1

In your isNot definition the 2nd line needs to be

return !$(this).is(selector);

rather than

return !this.is(selector);

FYI, here is a good article on the jQuery plugin architecture. http://www.learningjquery.com/2007/10/a-plugin-development-pattern

Answer 2

Perhaps the way you are including jQuery and your plugin is not right.

• Check your script tags order.
• Check if jQuery is loading properly
• Check if you don't have more than on instance of jQuery, which would make your plugin available in the instance that is not accessible anymore.

Here is an working example.

And as you mentioned the problem was really an issue with multiple references to jQuery.

Be careful when using Telerik's external templates, some files contains controls that loads JS and/or CSS which may conflict with your own.