Ask Ben: Using jQuery's triggerHandler() To Skip Default Behaviors 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
	<title>jQuery triggerHandler() Demo</title>
 
	<style type="text/css">
 
		p.field {
			border: 1px solid #666666 ;
			padding: 10px 10px 10px 10px ;
			}
 
		p.selected-field {
			background-color: #F0F0F0 ;
			}
 
	</style>
 
	<script type="text/javascript" src="jquery-1.3.2.js"></script>
	<script type="text/javascript">
 
		// Build our sample AJAX data.
		var arrData = [
			{
				checkbox: "chb1",
				span: "Here is some sample text"
			},
			{
				checkbox: "chb2",
				span: "Here is some sample text"
			},
			{
				checkbox: "chb3",
				span: "Here is some sample text"
			}
		];
 
 
 
		// When the DOM has loaded, initialize.
		$( InitForm );
 
		// Initializes the form.
		function InitForm(){
			// Get a handle on the form.
			jForm = $( "form" );
 
			// Add the dynamic elements.
			$.each(
				arrData,
				function( intIndex, objValue ){
					// Create a paragraph to hold teh elements.
					var jPara = $( "<p />" ).addClass( "field" );
 
					// Create the checkbox.
					var jCheckbox = $(
						"<input type='checkbox' name='" +
						objValue.checkbox +
						"' />"
						);
 
					// Create the span.
					var jSpan = $(
						"<span>" +
						objValue.span +
						"</span>"
						);
 
					// Merge all the elements.
					jPara
						.append( jCheckbox )
						.append( " " )
						.append( jSpan )
						.appendTo( jForm )
					;
				}
				);
 
 
			// Now that our elements have been added to the page,
			// let's find a click handler on each checkbox.
			jForm.find( ":checkbox" ).click(
				function( objEvent ){
					// Get the parent paragraph.
					jParent = $( this ).parents( "p.field" );
 
					// Check to see if the field is checked. If
					// so, then add the selected class, otherwise
					// remove it.
					if (this.checked){
 
						// Add the selected class.
						jParent.addClass( "selected-field" );
 
					} else {
 
						// Remove the selected class.
						jParent.removeClass( "selected-field" );
 
					}
				}
				);
 
 
			// Now, bind a click handler to the span so that when
			// it is clicked, it triggers the click on the checkbox.
			jForm.find( "span" ).click(
				function( objEvent ){
					// Get a jquery wrapper for clicked span.
					var jThis = $( this );
 
					// Get a reference to the checkbox.
					var jCheckbox = jThis.prev( ":checkbox" );
 
					// Because clicking the checkbox is a default
					// event, it does not mesh quite well with the
					// order of events. Therefore, let's manually
					// check the box and then trigger the handler
					// (but NOT the default event).
					jCheckbox[ 0 ].checked = !jCheckbox[ 0 ].checked;
 
					// Trigger click event on sibling checkbox.
					jCheckbox.triggerHandler( "click" );
				}
				);
		}
 
	</script>
</head>
<body>
 
	<h1>
		jQuery triggerHandler() Demo
	</h1>
 
	<form>
		<!--- Elements to be added dynamically. --->
	</form>
 
</body>
</html>

For Cut-and-Paste