jQuery Plugin Boilerplate, revisited

You are currently browsing comments. If you would like to return to the full story, you can read the full entry here: “jQuery Plugin Boilerplate, revisited”.

64 thoughts on “jQuery Plugin Boilerplate, revisited

  1. Pete Januarius

    Hi Stefan,

    Thanks very much for this article. I am looking at modelling my plugins on it. One thing I noticed which would be good to get your clarification:

    When you call a private method, the scope inside the private method (ie. the ‘this’ object) is equal to the Window object. Is this intended?



    1. Stefan Gabos Post author

      in JavaScript the “this” keyword refers to the object on the left side of the “.” (dot). But because private methods are called without “.” (e.g. foo_private_method();) then “window” it’s considered to be the caller (although, since this is a private method, you will not be able to call it from outside the object like window.foo_private_method();).

  2. Tommy Fisher


    Thanks for the template, it’s really going to help my development.

    I have a question, to access a public method from outside the plugin we have to use:


    However, if I wanted it to be more like standard plugin API format, such as:


    How would the above code have to be changed to allow this?
    Many thanks

  3. thelegendaryl

    thank you very much!! this is so clean. 😀 btw, it worked with version 1.3.1

  4. Osmar

    hi stefan this dont work in ie.7 $(‘#element’).data(‘pluginName’).foo_public_method()

  5. Mike Hoague

    // here we go!
    $.pluginName = function(element, options) {

    perhaps this should be rewritten to
    var pluginName = function(element, options){

    The former make the rest of the plugin public

  6. Ricardo

    It answered so many questions i had about jquery plugin development… Excellent job man!!!

  7. Pon Kumar Pandian

    Thanks for sharing. I am created a plugin as per this boilerplate code snippet. But i am facing an issues as the plugin init().. This init function calling multiple time. Can you please help on the same? Please find my code below
    //Initialize my pluging
    hierarchyData: hierarchyTreeviewData,
    isCheckboxRequired: true,
    isCheckboxCheckedDefault: false,
    isExpandDefault: false
    //Access my public pluging method

    Please let me know did i miss anything

  8. zigy

    How about click events,

    They work under the plugin definition:

    $.fn.pluginName = function(options) {
    $(this).click(function(e) {
    console.log(‘but how to get back into the rest of the plugin’);

    1. zigy

      Ok, so this works….

      $(element).on(‘click’, function(e){

Comments are closed.