JSFiddle - React, Tailwind, and code Playground

by Bozon

HTML

<!DOCTYPE html>
<html>
 <head></head>
 <body>
<div id="div1"> ( div1 )</div>
<div id="output"></div>
 </body> 
</html>

CSS

#div1 {background-color:red;width:150px;height:50px;}
  #div2 {background-color:yellow;width:150px;height:50px;}
  #output {margin:15px;width:50%}

JavaScript

$(document).ready(function() {

	var selector = '#div2';
	$('body').on("click", selector, function(){ 
		output("click #1 = " + selector);
	});

	$('body').on("click", selector, function(){ 
		output("click #2 = " + selector);
	});

	$(selector).click(function() {
		output("click #3 = " + selector);
	});
	
	$(selector).click(function() {
		output("click #4 = " + selector);
	});

	$("body").prepend('<div id="div2">CLICK HERE ( div2 )</div>');
	
	$('body').on("change load", selector, function(){ 
		output("load el with selector = " + selector);
	});
	
	$('body').one("mouseover", selector, function(){ 
		var elem = $('body').get(0);
		var all_events = $.data(elem, 'events') || $._data(elem).events;
		if( typeof all_events !== "undefined" ){
			all_events['click'].reverse();
		}
		else {
			output("all_events is undefined");
		}
		//output( all_events['click'] );
	});

	function output(text) {
		console.log(text);
		$("#output").html(function(i, h) {
			return h + text + "<br />";
		});
	}
});