Posted By

Meander365 on 09/29/10

Tagged

Versions (?)

Last Edited at 09/29/10 05:34pm

Statistics

Viewed 292 times

Favorited by 1 user(s)

Related snippets

Jquery Passing Dynamic Data to Event Handlers

/ Published in: jQuery

I can see this being useful for when you want to pass a lot of associated data to an event handler from elements and their chosen trigger action.

Highlighted TextExpand

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script type="text/javascript" src="../assets/js/jquery.js"></script>

$('#animate').bind('click', function(e){
		// Do something with e.name, e.surname, etc.
		var newHtml = e.type || [];
			newHtml = e.from || $(this).attr("id");
			newHtml += e.name || [];
			newHtml += e.surname || [];
			newHtml += e.age || [];		
			newHtml += e.gender || [];	
			$(".box").empty().append(newHtml);

});

$('#animate-fake').mouseover(function() {
	
		$("#animate").trigger({
		
			type:'click', //the bound event of the handler
			from:$(this).attr("id"),
			name:'John',
			surname:'Doe',
			age: 28,
			gender:'male'
		
		});
	});
	
	});
</script>
</head>
<body>
<style type="text/css">
	.box {width:100%;min-height:30px;background:#efefef;border:1px solid #ccc;}
</style>
	<a href="#" id="animate">Show me the object</a><br /><br />
	<div class="box"></div><br /><br />
	<a href="#" id="animate-fake">Hover Over Me</a>

</body>
</html>

Report this snippet Tweet

Comments

Subscribe to comments

Comment:

You need to login to post a comment.