设为首页收藏本站

PHPIN.NET

 找回密码
 立即注册
查看: 1184|回复: 0

[实例分享] jQuery如何操作ajax等后加载的未来元素?

[复制链接]

374

主题

381

帖子

2554

积分

管理员

Rank: 9Rank: 9Rank: 9

积分
2554
发表于 2015-1-17 20:37:56 | 显示全部楼层 |阅读模式

马上注册,结交更多好友,享用更多功能,让你轻松玩转社区。

您需要 登录 才可以下载或查看,没有帐号?立即注册

x
jQuery如何操作ajax等后加载的未来元素?

本文关键字词:函数live,未来元素,后加载,ajax后操作,jQuery资料



我们在制作网页的时候会遇到ajax等请求的以及动态加载的元素(称作未来的元素),此时发现已经加载的函数无法对未来的元素进行操作,此时该如何处理比较好呢?

答案就是:jQuery的live函数

jQuery 事件 - live() 方法


定义和用法
live() 方法为被选元素附加一个或多个事件处理程序,并规定当这些事件发生时运行的函数。
通过 live() 方法附加的事件处理程序适用于匹配选择器的当前及未来的元素(比如由脚本创建的新元素)。

语法:
$(selector).live(event,data,function)

参数:
event                必需。规定附加到元素的一个或多个事件。由空格分隔多个事件。必须是有效的事件。
data                  可选。规定传递到该函数的额外数据。
function            必需。规定当事件发生时运行的函数。


实例说明:
如何使用 live() 方法向尚未创建的元素添加事件处理器。
Html:
  1. <!doctype html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5. <title>ceshi jquery live</title>
  6. <script src="http://libs.baidu.com/jquery/1.8.3/jquery.min.js"></script>
  7. <script>
  8. $(document).ready(function(){
  9. //点击ajax请求
  10.     $("#dianji").click(function(){

  11.         $.ajax({
  12.             url:"test.txt",
  13.             type:"get",
  14.             cache:false,
  15.             dataType:"html",
  16.             success:function(data,status){
  17.                 $("#table_datas").append(data);
  18.             }
  19.         });

  20. });

  21. //操作加载后的对象测试
  22. $("#table_datas [class$='_config']").live("click",function(){
  23.     a=$(this).text();
  24.     alert(a);
  25. });

  26. });
  27. </script>
  28. </head>
  29. <body>
  30. <p>以下为 ajax 加载</p>
  31. <div id="table_datas" style="padding:20px;"><a href="javascript:;" id="dianji">ajax加载test.txt的数据</a></div>
  32. <br /><br /><br /><br />
  33. <p>以下为 html 原有</p>
  34. <div id="other" style="padding:20px;">
  35.     <div class='d_config'>d_config</div>
  36.     <div class='e_config'>e_config</div>
  37.     <div class='f_config'>f_config</div>
  38. </div>
  39. </body>
  40. </html>
复制代码

test.txt:
  1. <br /><a href="javascript:;" class='a_config'>我是Ajax加载的A</a><br />
  2. <a href="javascript:;" class='b_config'>我是Ajax加载的B</a><br />
  3. <a href="javascript:;" class='c_config'>我是Ajax加载的C</a><br />
复制代码


提醒:
live()函数方法只适应于jQuery1.8以下版本.1.8以上版本转换为on()函数。



1.83版本可以这么写:
  1. <!doctype html>
  2. <html lang="zh-cn">
  3. <head>
  4.     <meta charset="UTF-8">
  5. <title>ceshi jquery live</title>
  6. <script src="http://libs.baidu.com/jquery/1.8.3/jquery.min.js"></script>
  7. <script>
  8. $(document).ready(function(){
  9. //点击ajax请求
  10.     $("#dianji").click(function(){

  11.         $.ajax({
  12.             url:"test.txt",
  13.             type:"get",
  14.             cache:false,
  15.             dataType:"html",
  16.             success:function(data,status){
  17.                 $("#table_datas").append(data);
  18.             }
  19.         });

  20. });

  21. //操作加载后的对象测试
  22. $(document).on("click","#table_datas [class$='_config']",function(){
  23.     a=$(this).text();
  24.     alert(a);
  25. });

  26. });
  27. </script>
  28. </head>
  29. <body>
  30. <p>以下为 ajax 加载</p>
  31. <div id="table_datas" style="padding:20px;"><a href="javascript:;" id="dianji">ajax加载test.txt的数据</a></div>
  32. <br /><br /><br /><br />
  33. <p>以下为 html 原有</p>
  34. <div id="other" style="padding:20px;">
  35.     <div class='d_config'>d_config</div>
  36.     <div class='e_config'>e_config</div>
  37.     <div class='f_config'>f_config</div>
  38. </div>
  39. </body>
  40. </html>
复制代码


以上为演示实例。更多资料请参阅JQ手册或者谷歌/百度。
您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

小黑屋|手机版|Archiver|PHPIN.NET ( 冀ICP备00000001号 )|网站地图  

GMT+8, 2016-12-3 23:36

Powered by Discuz! X3.2

© 2001-2013 Comsenz Inc.

快速回复 返回顶部 返回列表