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.


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.