Start line:  
End line:  

Snippet Preview

Snippet HTML Code

Stack Overflow Questions
<!DOCTYPE html>
<title>Event Delegation Tests</title>
<script src="../dist/jquery.js"></script>
table {
	border-collapse: collapse;
	empty-cells: show;
th {
	text-align: left;
thead td {
	width: 11%;
tbody td {
	background: #fed;
th, td {
	border: 1px solid #bbb;
<h2>Delegate Tests (<span id="fileversion">x</span>)</h2>

<table id="changes">
		<td id="select-one">
				<option value='one1'>one1</option>
				<option value='one2'>one2</option>
				<option value='one3'>one3</option>
				<option value='two1'>two1</option>
				<option value='two2' selected="selected">two2</option>
				<option value='two3'>two3</option>
		<td id="select-mult">
			<select multiple="multiple">
				<option value='multi1'>multi1</option>
				<option value='multi2'>multi2</option>
				<option value='multi3'>multi3</option>
		<td id="checkbox">
			<input type="checkbox" name="mycheckbox" id="check1"/>
			<label for="check1">check1</label><br/>
			<input type="checkbox" name="mycheckbox" id="check2"/>
			<label for="check2">check2</label><br />
			<input type="checkbox" name="mycheckbox" id="check3" disabled="disabled"/>
			<label for="check3">check3</label>
		<td id="radio">
			<input type="radio" name="myradio" id="radio1"/>
			<label for="radio1">Radio1</label><br/>
			<input type="radio" name="myradio" id="radio2"/>
			<label for="radio2">Radio2</label><br />
			<input type="radio" name="myradio" id="radio3" disabled="disabled"/>
			<label for="radio3">Radio3</label>
		<td id="file">
			<input class="file_test" id="file1" type="file"/>
		<td id="text">
			<input class='test' value='' id='input' size='10' />
			<input class='test' value='test' id='input2' size='10' readonly="readonly" />
		<td id="textarea">
			<textarea rows='2'></textarea>
		<td id="button">
			<button name="mybutton1" id="button1">Button</button><br />
			<button name="mybutton2" id="button2"><span>Button w/ child</span></button><br />
			<button name="mybutton3" id="button3" disabled="disabled">Button Disabled</button><br />
			<button name="mybutton4" id="button4" disabled="disabled"><span disabled="disabled">Button, child Disabled</span></button><br />
<p>NOTE: Only IE supports propertychange, beforeactivate, beforedeactivate; buttons do not support change events.</p>

<h2>Submit Tests</h2>
			Submit each:
			<form action="" id="text_submit">
				<input class='test' type='text' value='Key Return To Submit'/>
			<form action="" id="password_submit">
				<input class='test' type='password' value=''/>
			<form action="" id="submit_submit">
				<input type='submit' value="Click Me To Submit" />
		<td id='textSubmit' class="red">TEXT</td>
		<td id='passwordSubmit' class="red">PASSWORD</td>
		<td id='submitSubmit' class="red">BUTTON</td>
		<td id='boundSubmit' class="red">DOCUMENT</td>

	<form id="autosub"><input type=submit name=subme /></form>

<script type='text/javascript'>


// Try an auto-submit, it should only fire once
	var triggered = false;
	$("#autosub input").trigger("keypress");
	$("body").on("submit", "#autosub", function( e ){
		if ( triggered ) {
			alert("autosubmit FAIL");
		triggered = true;

// Events we want to track in row-order
var events = "bind-change live-change onX-change bind-propertychange live-beforeactivate live-focusin bind-focus live-beforedeactivate live-focusout bind-blur live-click live-keydown".split(" "),
	counter = 0;
	blinker = function(event){
		if ( !counter ) {
			$("#changes tbody td").text("");
		var $el =,
			prev = $el.text();
		prev = prev? prev +" | " : "";
		return $el
			.text(prev + ++counter+" " + (this.value.replace(/^on$/,"") || || this.checked || ""))

for ( var i=0; i < events.length; i++ ) {
	var m = events[i].split("-"),
		api = m[0],
		type = m[1],
		$row = $("<tr><th>"+type+" "+api+"</th></tr>");

	$("#changes thead td").each(function(){
		var id = "#",
			$cell = $('<td></td>');
		if ( api == "onX" ) {
			$(this).find("input, button, select, textarea").each(function(){
				this["on"+type] = function(e){ e = $.event.fix(e||event); = $cell;, e); };
		} else if ( api == "bind" ) {
			$(this).find("input, button, select, textarea").bind(type, $cell, blinker);
		} else {
			$(id+" input,"+id+" button,"+id+" select,"+id+" textarea").live(type, $cell, blinker);
	$("#changes tbody").append($row);

// Ensure that cloned elements get the delegated event magic; this is
// implementation-specific knowledge but otherwise impossible to test.
// The beforeactivate event attaches a direct-bound change event.
// (Only care about the live change for this third select element.)
var sel1 = $("#select-one select:first-child");
if ( typeof(sel1[0].fireEvent) !== "undefined" ) {
	sel1.trigger( "beforeactivate" ).clone().appendTo("#select-one");
	//alert($("#select-one select").map(function(){ return this._change_attached || "undef"; }).get().join("|"));

jQuery.fn.blink = function(){
	return this
		.text( (parseInt(this.text(), 10) || 0) + 1 )

jQuery.fn.addSubmitTest = function( id, prevent ) {
	return"submit", function(e){
		if ( prevent ) {

$("#text_submit").addSubmitTest("#textSubmit", true);
$("#password_submit").addSubmitTest("#passwordSubmit", true);
$("#submit_submit").addSubmitTest("#submitSubmit", true);
$("#prog_submit").addSubmitTest("#submitSubmit", true);
$(document).bind("submit", function(){

New to GrepCode? Check out our FAQ X