abruzzihraig/index.html

## index.html
<!DOCTYPE html>
<html>
<head>
<script src="http://code.jquery.com/jquery-2.1.1.min.js"></script>
  <meta charset="utf-8">
  <title>JS Bin</title>
<style id="jsbin-css">
.outer {
  width: 400px;
  height: 400px;
  background-color: red;
}

.inner {
  width: 300px;
  height: 300px;
  background: gray;
}

.box {
  width: 200px;
  height: 200px;
  background: pink;
}

.click-area {
  padding: 10px;
  background: skyblue;
}

#jq {
  margin-top: 20px;
}

.new {
  width: 50px;
  height: 50px;
  background: navy;
}
</style>
</head>
<body>
<div class="outer" id="no-jq">
  <div class="inner">
    <div class="box">
      <div class="click-area">click me</div>
    </div>
  </div>
</div>
<div class="outer" id="jq">
  <div class="inner">
    <div class="box">
      <div class="click-area">click me with jquery</div>
    </div>
  </div>
</div>
<script id="jsbin-javascript">
function on(type, handler, specific_class) {
  var node = this;
  document.querySelector(node).addEventListener(type, function(e) {
    var source_elem = e.target;
    if (specific_class) {
      while (source_elem.className !== node.className) {
        if (specific_class === source_elem.className) {
          handler(e.target.className);
          break;
        }
        source_elem = source_elem.parentNode;
      }
    } else handler(e.target.className);
  });
}

on.call('#no-jq', 'click', function() {
  return alert(arguments[0]);
}, 'box');


$('#jq').on('click', '.box', function(e) {
  alert(e.target.className);
});

$('#jq').find('.click-area').append('<div class="new"></div>');
$('#jq').find('.click-area').append('<div class="new"></div>');
</script>

<script id="jsbin-source-html" type="text/html"><!DOCTYPE html>
<html>
<head>
<script src="//code.jquery.com/jquery-2.1.1.min.js"><\/script>
  <meta charset="utf-8">
  <title>JS Bin</title>
</head>
<body>
<div class="outer" id="no-jq">
  <div class="inner">
    <div class="box">
      <div class="click-area">click me</div>
    </div>
  </div>
</div>
<div class="outer" id="jq">
  <div class="inner">
    <div class="box">
      <div class="click-area">click me with jquery</div>
    </div>
  </div>
</div>
</body>
</html></script>

<script id="jsbin-source-css" type="text/css">.outer {
  width: 400px;
  height: 400px;
  background-color: red;
}

.inner {
  width: 300px;
  height: 300px;
  background: gray;
}

.box {
  width: 200px;
  height: 200px;
  background: pink;
}

.click-area {
  padding: 10px;
  background: skyblue;
}

#jq {
  margin-top: 20px;
}

.new {
  width: 50px;
  height: 50px;
  background: navy;
}</script>

<script id="jsbin-source-javascript" type="text/javascript">function on(type, handler, specific_class) {
  var node = this;
  document.querySelector(node).addEventListener(type, function(e) {
    var source_elem = e.target;
    if (specific_class) {
      while (source_elem.className !== node.className) {
        if (specific_class === source_elem.className) {
          handler(e.target.className);
          break;
        }
        source_elem = source_elem.parentNode;
      }
    } else handler(e.target.className);
  });
}

on.call('#no-jq', 'click', function() {
  return alert(arguments[0]);
}, 'box');


$('#jq').on('click', '.box', function(e) {
  alert(e.target.className);
});

$('#jq').find('.click-area').append('<div class="new"></div>');
$('#jq').find('.click-area').append('<div class="new"></div>');</script></body>
</html>

## jsbin.buyeloyezu.css
.outer {
  width: 400px;
  height: 400px;
  background-color: red;
}

.inner {
  width: 300px;
  height: 300px;
  background: gray;
}

.box {
  width: 200px;
  height: 200px;
  background: pink;
}

.click-area {
  padding: 10px;
  background: skyblue;
}

#jq {
  margin-top: 20px;
}

.new {
  width: 50px;
  height: 50px;
  background: navy;
}

## jsbin.buyeloyezu.js
function on(type, handler, specific_class) {
  var node = this;
  document.querySelector(node).addEventListener(type, function(e) {
    var source_elem = e.target;
    if (specific_class) {
      while (source_elem.className !== node.className) {
        if (specific_class === source_elem.className) {
          handler(e.target.className);
          break;
        }
        source_elem = source_elem.parentNode;
      }
    } else handler(e.target.className);
  });
}

on.call('#no-jq', 'click', function() {
  return alert(arguments[0]);
}, 'box');


$('#jq').on('click', '.box', function(e) {
  alert(e.target.className);
});

$('#jq').find('.click-area').append('<div class="new"></div>');
$('#jq').find('.click-area').append('<div class="new"></div>');
	<!DOCTYPE html>
	<html>
	<head>
	<script src="http://code.jquery.com/jquery-2.1.1.min.js"></script>
	<meta charset="utf-8">
	<title>JS Bin</title>
	<style id="jsbin-css">
	.outer {
	width: 400px;
	height: 400px;
	background-color: red;
	}

	.inner {
	width: 300px;
	height: 300px;
	background: gray;
	}

	.box {
	width: 200px;
	height: 200px;
	background: pink;
	}

	.click-area {
	padding: 10px;
	background: skyblue;
	}

	#jq {
	margin-top: 20px;
	}

	.new {
	width: 50px;
	height: 50px;
	background: navy;
	}
	</style>
	</head>
	<body>
	<div class="outer" id="no-jq">
	<div class="inner">
	<div class="box">
	<div class="click-area">click me</div>
	</div>
	</div>
	</div>
	<div class="outer" id="jq">
	<div class="inner">
	<div class="box">
	<div class="click-area">click me with jquery</div>
	</div>
	</div>
	</div>
	<script id="jsbin-javascript">
	function on(type, handler, specific_class) {
	var node = this;
	document.querySelector(node).addEventListener(type, function(e) {
	var source_elem = e.target;
	if (specific_class) {
	while (source_elem.className !== node.className) {
	if (specific_class === source_elem.className) {
	handler(e.target.className);
	break;
	}
	source_elem = source_elem.parentNode;
	}
	} else handler(e.target.className);
	});
	}

	on.call('#no-jq', 'click', function() {
	return alert(arguments[0]);
	}, 'box');


	$('#jq').on('click', '.box', function(e) {
	alert(e.target.className);
	});

	$('#jq').find('.click-area').append('<div class="new"></div>');
	$('#jq').find('.click-area').append('<div class="new"></div>');
	</script>

	<script id="jsbin-source-html" type="text/html"><!DOCTYPE html>
	<html>
	<head>
	<script src="//code.jquery.com/jquery-2.1.1.min.js"><\/script>
	<meta charset="utf-8">
	<title>JS Bin</title>
	</head>
	<body>
	<div class="outer" id="no-jq">
	<div class="inner">
	<div class="box">
	<div class="click-area">click me</div>
	</div>
	</div>
	</div>
	<div class="outer" id="jq">
	<div class="inner">
	<div class="box">
	<div class="click-area">click me with jquery</div>
	</div>
	</div>
	</div>
	</body>
	</html></script>

	<script id="jsbin-source-css" type="text/css">.outer {
	width: 400px;
	height: 400px;
	background-color: red;
	}

	.inner {
	width: 300px;
	height: 300px;
	background: gray;
	}

	.box {
	width: 200px;
	height: 200px;
	background: pink;
	}

	.click-area {
	padding: 10px;
	background: skyblue;
	}

	#jq {
	margin-top: 20px;
	}

	.new {
	width: 50px;
	height: 50px;
	background: navy;
	}</script>

	<script id="jsbin-source-javascript" type="text/javascript">function on(type, handler, specific_class) {
	var node = this;
	document.querySelector(node).addEventListener(type, function(e) {
	var source_elem = e.target;
	if (specific_class) {
	while (source_elem.className !== node.className) {
	if (specific_class === source_elem.className) {
	handler(e.target.className);
	break;
	}
	source_elem = source_elem.parentNode;
	}
	} else handler(e.target.className);
	});
	}

	on.call('#no-jq', 'click', function() {
	return alert(arguments[0]);
	}, 'box');


	$('#jq').on('click', '.box', function(e) {
	alert(e.target.className);
	});

	$('#jq').find('.click-area').append('<div class="new"></div>');
	$('#jq').find('.click-area').append('<div class="new"></div>');</script></body>
	</html>