jQ Plugins -here we put initialization logic... where we put logic execute every time plugin is called?

Plugin.prototype.init = function () { // here we put initialization logic… where we put logic execute every time plugin is called?

    ;(function ( $, window, document, undefined ) {
    // undefined is used here as the undefined global
    // variable in ECMAScript 3 and is mutable (i.e. it can
    // be changed by someone else). undefined isn't really
    // being passed in so we can ensure that its value is
    // truly undefined. In ES5, undefined can no longer be
    // modified.
    // window and document are passed through as local
    // variables rather than as globals, because this (slightly)
    // quickens the resolution process and can be more
    // efficiently minified (especially when both are
    // regularly referenced in your plugin).
    // Create the defaults once
    var pluginName = 'defaultPluginName',
        defaults = {
            propertyName: "value"
    // The actual plugin constructor
    function Plugin( element, options ) {
        this.element = element;
        // jQuery has an extend method that merges the
        // contents of two or more objects, storing the
        // result in the first object. The first object
        // is generally empty because we don't want to alter
        // the default options for future instances of the plugin
        this.options = $.extend( {}, defaults, options) ;
        this._defaults = defaults;
        this._name = pluginName;
    Plugin.prototype.init = function () {
        // Place initialization logic here
        // You already have access to the DOM element and
        // the options via the instance, e.g. this.element
        // and this.options
    // A really lightweight plugin wrapper around the constructor,
    // preventing against multiple instantiations
    $.fn[pluginName] = function ( options ) {
        return this.each(function () {
            if (!$.data(this, 'plugin_' + pluginName)) {
                $.data(this, 'plugin_' + pluginName,
                new Plugin( this, options ));
})( jQuery, window, document );

  propertyName: 'a custom value'

I did a simple plugin but execute only in the first click (of the button) - I want in every click…

Can you post a. Link wher we can see your plugin in action?


here is - Plugin job is convert English to Russian and vice versus [type any lang in first textarea get response in second) - but Only the first button click work - there afetr clicks Not function,…and needed page refresh and again only first click work… eg add chars or replace chars…

You can add methods to Plugin.prototype

Plugin.prototype.translate = function() { ... }

Then you can alter the plugin wrapper to reflect the fact that the jQuery documentation recommends calling plugin methods by passing a string to the main plugin method.

$.fn[pluginName] = function ( options ) {
    return this.each(function () {
        if (typeof options === "string") {
            var args = Array.prototype.slice.call(arguments, 1), plugin = $.data(this, 'plugin_' + pluginName);
            plugin[options].apply(plugin, args);
        } else if (!$.data(this, 'plugin_' + pluginName)) {
            $.data(this, 'plugin_' + pluginName, new Plugin( this, options ));

Now initialize your plugin (I’m calling mine translator):


and then call the translate method whenever the button is clicked:

$("button").on("click", function() {

Here’s a demo.

And here’s some further reading:

Hope that helps.

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.