创建一个非常简单的jQuery插件，无法正常工作

Question

I've never created a jQuery plug-in before. I'm trying it out and keeping it simple for now- here's my plug-in code which is hosted on a CDN in my company:

(function ($) {

    $.fn.displayToastrNotifications = function () {
        alert('test');
    };

})(jQuery);

I'm referencing this JavaScript file inside my page:

<script src="http://server/sites/CDN/Scripts/toastr-notifications.js"></script>

Finally, in the same page, I have:

$(document).ready(function () {
     $.displayToastrNotifications();
});

Am I doing this right? The JavaScript file containing my plug-in code is being brought back to the browser per Firebug. I do not get an alert box when I refresh my page. What am I doing wrong?

EDIT

The console reports an error:

TypeError: $.displayToastrNotifications is not a function

$.displayToastrNotifications();

But, it is a function, at least I think it is...

Answer 1

No, that's not right. You're adding the function to $.fn , so that means it's something to be used as a method of jQuery objects:

$(something).displayToastrNotifications();

If you want a "global" function like $.ajax , then you'd set it up as just a property of $ , not $.fn .

Answer 2

since it is a plugin it need to be invoked in a jQuery wrapper object like

$('body').displayToastrNotifications();

Demo: Fiddle