简体   繁体   中英

Writing jquery plugin and it is not executing

I am trying to write a simple jQuery plugin for my needs, using a variant of the first one in this style guide .

;(function($) {
    var plugin_name = 'my_plugin',
        defaults = {};

    function Plugin ( element, options ) {
        this.element = element;

        this.options = $.extend( {}, defaults, options );

        this._defaults = defaults;
        this._name = plugin_name;

        this.init();
    }

    Plugin.prototype = {
        init: function () {
            // Plugin code - attempt to debug
            alert('hi');
        }
    }

    $.fn[plugin_name] = function ( options ) {
        return this.each(function () {
            if (!$.data(this, 'plugin_' + plugin_name)) {
                $.data(this, 'plugin_' + plugin_name, new Plugin( this, options ));
            }
        })
    }

})( jQuery );

However, it doesn't seem to be executed when I call it. Fiddle here: http://jsfiddle.net/DCRnU/

$(document).ready(function() {
    $.fn.my_plugin();
});

What am I missing out on?

You're not calling the function properly.
If you had a div element in your HTML, you could call your function like this:

$(document).ready(function() {
  $("div").my_plugin();
});

Example fiddle

That's because this line: return this.each

It's expect to get some iterable object. But there is nothing to loop over it.

if you add something like this:

var array = [1];
$(array).my_plugin();

it'll be fine.

The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM