Advanced Search

Jquery Passing Dynamic Data to Event Handlers

/ Published in: jQuery
Save to your folder(s)
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.

Expand | Embed | Plain Text

Copy this code and paste it in your HTML 
  1. <!DOCTYPE html>
  2. <html xmlns="http://www.w3.org/1999/xhtml">
  3. <head>
  4. <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  5. <script type="text/javascript" src="../assets/js/jquery.js"></script>
  6.  
  7. <script type="text/javascript">
  8.  
  9. $(function () {
  10.  
  11. 	$('#animate').bind('click', function(e){
  12. 		// Do something with e.name, e.surname, etc.
  13. 		var newHtml = e.type || [];
  14. 			newHtml = e.from || $(this).attr("id");
  15. 			newHtml += e.name || [];
  16. 			newHtml += e.surname || [];
  17. 			newHtml += e.age || [];		
  18. 			newHtml += e.gender || [];	
  19. 			$(".box").empty().append(newHtml);
  20.  
  21. 	});
  22.  
  23. 	$('#animate-fake').mouseover(function() {
  24.  
  25. 		$("#animate").trigger({
  26.  
  27. 			type:'click', //the bound event of the handler
  28. 			from:$(this).attr("id"),
  29. 			name:'John',
  30. 			surname:'Doe',
  31. 			age: 28,
  32. 			gender:'male'
  33.  
  34. 		});
  35. 	});
  36.  
  37. 	});
  38. </script>
  39. </head>
  40. <body>
  41. <style type="text/css">
  42. 	.box {width:100%;min-height:30px;background:#efefef;border:1px solid #ccc;}
  43. </style>
  44. 	<a href="#" id="animate">Show me the object</a><br /><br />
  45. 	<div class="box"></div><br /><br />
  46. 	<a href="#" id="animate-fake">Hover Over Me</a>
  47.  
  48. </body>
  49. </html>

Report this snippet


Comments

RSS Icon Subscribe to comments

You need to login to post a comment.