louisremi/bubbleIE.html

## bubbleIE.html
<!DOCTYPE html>
<html>
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
		<title>Bubbling test</title>
		<style>
			.test li {
				margin-left: 3em;
				width: 200px;
			}

			.red {
				background: #cb113d;
			}
			.green {
				background: #37b810;
			}
			.blue {
				background: #1037b8;
			}
			.yellow {
				background: #d4a412;
			}
		</style>
	</head>
	<body>
		<div id="test1" class="test">

			<ul>
				<li class="red"><form><input type="submit"/></form></li>
				<li class="green"><form><input type="image"/></form></li>
				<li class="yellow"><form><input type="text"/></form></li>
				<li class="blue"><form><input type="password"/></form></li>
			</ul>
			<p>Class of the last submited item: <span class="display"></span></p>
		</div>

		<div id="test2" class="test">
			<ul>
				<li class="red"><input type="text"/></li>
				<li class="green"><input type="text"/></li>
				<li class="yellow"><input type="text"/></li>
				<li class="blue"><input type="text"/></li>
			</ul>
			<p>Class of the last changed item: <span class="display"></span></p>
		</div>

		<div id="test3" class="test">
			<ul>
				<li class="red"><input type="text" value="some text"/></li>
				<li class="green"><input type="text" value="some text"/></li>
				<li class="yellow"><input type="text" value="some text"/></li>
				<li class="blue"><input type="text" value="some text"/></li>
			</ul>
			<p>Class of the last selected item: <span class="display"></span></p>
		</div>

		<script src="jquery.js"></script>
		<script>
			$(function() {
				$("#test1").submit(function( event ) {
					console.log(event)
					var $elem = $(event.target).closest("li");
					if($elem.length)
						$(this).find(".display").text($elem.attr("class"));
					return false;
				});

				$("#test2").change(function( event ) {
					console.log(event)
					var $elem = $(event.target).closest("li");
					if($elem.length)
						$(this).find(".display").text($elem.attr("class"));
					return false;
				});

				$("#test3").select(function( event ) {
					console.log(event)
					var $elem = $(event.target).closest("li");
					if($elem.length)
						$(this).find(".display").text($elem.attr("class"));
					return false;
				});
			});
		</script>
	</body>
</html>
	<!DOCTYPE html>
	<html>
	<head>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
	<title>Bubbling test</title>
	<style>
	.test li {
	margin-left: 3em;
	width: 200px;
	}

	.red {
	background: #cb113d;
	}
	.green {
	background: #37b810;
	}
	.blue {
	background: #1037b8;
	}
	.yellow {
	background: #d4a412;
	}
	</style>
	</head>
	<body>
	<div id="test1" class="test">

	<ul>
	<li class="red"><form><input type="submit"/></form></li>
	<li class="green"><form><input type="image"/></form></li>
	<li class="yellow"><form><input type="text"/></form></li>
	<li class="blue"><form><input type="password"/></form></li>
	</ul>
	<p>Class of the last submited item: <span class="display"></span></p>
	</div>

	<div id="test2" class="test">
	<ul>
	<li class="red"><input type="text"/></li>
	<li class="green"><input type="text"/></li>
	<li class="yellow"><input type="text"/></li>
	<li class="blue"><input type="text"/></li>
	</ul>
	<p>Class of the last changed item: <span class="display"></span></p>
	</div>

	<div id="test3" class="test">
	<ul>
	<li class="red"><input type="text" value="some text"/></li>
	<li class="green"><input type="text" value="some text"/></li>
	<li class="yellow"><input type="text" value="some text"/></li>
	<li class="blue"><input type="text" value="some text"/></li>
	</ul>
	<p>Class of the last selected item: <span class="display"></span></p>
	</div>

	<script src="jquery.js"></script>
	<script>
	$(function() {
	$("#test1").submit(function( event ) {
	console.log(event)
	var $elem = $(event.target).closest("li");
	if($elem.length)
	$(this).find(".display").text($elem.attr("class"));
	return false;
	});

	$("#test2").change(function( event ) {
	console.log(event)
	var $elem = $(event.target).closest("li");
	if($elem.length)
	$(this).find(".display").text($elem.attr("class"));
	return false;
	});

	$("#test3").select(function( event ) {
	console.log(event)
	var $elem = $(event.target).closest("li");
	if($elem.length)
	$(this).find(".display").text($elem.attr("class"));
	return false;
	});
	});
	</script>
	</body>
	</html>