JSFiddle - React, Tailwind, and code Playground

by Jason Burnett

HTML

<div>Test Element</div>
<button id="color">Change Color</button>
<button id="height">Change Height</button>
<button id="remove">remove</button>
<button id='add'>Add</button>

JavaScript

setupEventedjQueryMethods();
var $div = $("div");

$div.on("before_css", function(ev,args){
    if(typeof args == "object"){
        for(var key in args){
            log("changing "+key+" to " + args[key]);
        }
    }else{
        log("changing "+arguments[1]+" to " + arguments[2]);                                
    }
    
});

$div.on("before_remove", function(){
    log("removing " +this.innerHTML);
});
    
$("#color").click(function(){
    $div.css({color:"blue"});
});
$("#add").click(function (){$("body").append("<div id='test'>test</div>");
                           });
$("#remove").click(function(){
    $div.remove();
});

$("#height").click(function(){
    $div.height(200);
});
$("body").on("before_append", function () {
    alert ("about to append something are you sure? ");
});
function setupEventedjQueryMethods(){
    window.originalMethods = {};
    for( var key in $.prototype ){
        if(
            typeof($.fn[key]) != "function"
            || !$.fn.hasOwnProperty(key)
            || key == "init" 
            || key == "constructor"
            || key == 'pushStack'
            || key == 'each'
            || key == 'trigger'
            || key == 'find'
          )
        {
            continue;        
        }
        window.originalMethods[key] = $.prototype[key];
        $.prototype[key] = (function(key){
            
            return function(){
                $(this).trigger("before_"+key, arguments);
                window.originalMethods[key].apply(this, arguments);
                $(this).trigger("after_"+key, arguments);    
            };
            
        })(key);
    }
}

function log(args){$(document.body).append("<br><span style='color:red'>"+args+"</span><br>");}