Jquery将动态数据传递给事件处理程序

Posted

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了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.
  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>

以上是关于Jquery将动态数据传递给事件处理程序的主要内容，如果未能解决你的问题，请参考以下文章

将数据传递给 Windows 控制台控制处理程序

如何将片段中的 ListView 对象的数据传递给 Activity？

如何将变量数据传递给 createFragementContainer

使用 jquery ajax 将数据传递给 php 的问题

jQuery 将 Ajax 调用中的数据传递给 MVC 操作方法

Vue：将数据传递给动态组件