How to call a jQuery plugin function outside the plugin?

jQuery is a JavaScript library introduced to make development with JavaScript easier. It reduces the development time. Let us see how to call a jQuery plugin function outside the plugin.

For calling a plugin function outside the plugin, wrap the jQuery method for returning the instance of the constructor. Call prototype methods on it. This approach allows you to access the plugin's internal methods after the plugin has been initialized.

Method 1: Returning Constructor Instance

First, create a plugin that returns the constructor instance ?

$.fn.myFunction = function(config){
    return new myFunction(config);
};

function myFunction(config) {
    this.config = config || {};
    
    this.setToken = function(column) {
        console.log('Token set for column: ' + column);
    };
    
    this.getData = function() {
        return 'Plugin data';
    };
}

Instance the plugin and call the method ?

var plugin = $('#someSelector').myFunction();
plugin.setToken('columnName');
plugin.getData();

Method 2: Storing Instance in Data Attribute

Another approach is to store the plugin instance in the element's data and access it later ?

$.fn.myPlugin = function(options) {
    return this.each(function() {
        var instance = new MyPlugin(this, options);
        $(this).data('myPlugin', instance);
    });
};

function MyPlugin(element, options) {
    this.element = element;
    this.options = options;
    
    this.publicMethod = function(param) {
        console.log('Public method called with: ' + param);
    };
}

// Usage
$('#element').myPlugin({option: 'value'});
var pluginInstance = $('#element').data('myPlugin');
pluginInstance.publicMethod('test');

Conclusion

Calling jQuery plugin functions outside the plugin can be achieved by returning the constructor instance or storing it in the element's data attribute. This enables access to internal plugin methods after initialization, providing greater flexibility in plugin usage.