JSFiddle - React, Tailwind, and code Playground
HTML
<body>
<button class="btn1">Button 1</button>
<button class="btn2">Button 2</button>
</body>
JavaScript
$(function() {
$("body").myplugin( {
helperFunctions : {
funcA : function( obj ) {
$(obj).text( "Button A" );
},
funcB : function( obj ) {
$(obj).text( "Button B" );
}
},
handlers : [
{ on : "click",
selector : ".btn1",
handlerFunc : function( funcs, obj ){
funcs.funcA( obj );
}
},
{ on : "click",
selector : ".btn2",
handlerFunc : function( funcs, obj ){
funcs.funcB( obj );
}
}
]
});
});
(function ($) {
$.fn.extend({
myplugin: function ( settings ) {
var $this = $(this);
function createEvent(id) {
$this.on(
settings.handlers[id].on,
settings.handlers[id].selector,
function() {
settings.handlers[id].handlerFunc( settings.helperFunctions, this)
}
);
}
for( var handlerIdx in settings.handlers ){
var handler = settings.handlers[ handlerIdx ];
var s = handler.selector;
createEvent(handlerIdx);
}
}
});
})(jQuery);