JSFiddle - React, Tailwind, and code Playground
HTML
<!doctype html>
<html>
<head><title>Test</title></head>
<body>
<script src="https://code.jquery.com/jquery-1.11.3.min.js"></script>
<div id="wrapper"></div>
<script>
var element = {
id : 'xyz',
html : '<div id="xyz"><label>ABC</label><input type="text"></div>',
events : [
{
'selector':'label',
'event_name':'click',
'callback':function( event, element ){
alert( '[EVENT] Click <label>' );
console.log( event );
console.log( element );
}
},
{
'selector':'input',
'event_name':'change',
'callback':function( event, element ){
alert( '[EVENT] Change <input>' );
console.log( event );
console.log( element );
}
}
]
}
$( document ).ready( function(){
$( element.html ).appendTo( '#wrapper' );
for( var i = 0; i < element.events.length; i++ ){
//var eventReg = $.extend({},element.events[i]); //Its not a object-clone-problem
var eventReg = element.events[i];
console.log( eventReg.event_name );
console.log( eventReg.selector );
console.log( '#####################' );
$( '#'+ element.id ).on( eventReg.event_name, eventReg.selector, function( event ){eventReg.callback( event, this )} );
}
...