jquery操作ajax返回的页面元素
这两天工作不忙,正好从朋友那里拿到一个某个应用的开发文档,相关数据放在了mongodb里,自己电脑可以本地开启服务器然后通过给的借口来获取数据。由于这是一个比较大比较全的一个完整项目,也没有那么多经历全部做一下,就找了其中几部分来做一下,由于是一个电商类的移动端,所以那些数据都是动态加载上去的,通过ajax动态获取然后添加到页面上,所以主要是模板引擎的使用和ajax的运用,其他就是一些样式的操作。虽然以前也做过,但是这次碰到了一个问题,就是需要在ajax返回的内容里找到某个元素,然后给那个元素绑定事件。其实思路是很清晰的,就是和平时的绑定元素一样,通过jquery选择器找到元素,进行相关操作就好,但是就这样,一直就是无法成功的绑定事件,纠结了差不多1个小时多,终于经过实践和网上的相关帮助,找到了原因。
因为页面上的元素都是动态加载出来的,所以并不是写死的静态,所以相关元素一开始是不存在于页面上的,除了顶部和底部其他都是没有的,但是却可以在css样式表里操作这些动态生成的元素的样式,就是和平常没有使用动态加载数据一样,但是为什么样式可以操作,事件却不能操作了呢?我发现操作样式的时候就是正常的添加类名,然后层级下来写样式,完全没有问题,可是给那些元素绑定事件的时候也是通过类名进行绑定,但就是没办法,后来查了下资料,发现jquery操作的dom元素是要在当前页面上的,那些动态加载出来的元素不属于当前页面。所以,要怎么才能操作这些元素呢?方法就是绑定事件的函数写在success函数下,当ajax成功获取到数据,并且放到页面上后,直接在后面操作事件,不要跳出到ajax方法外面的函数去操作。
上面的代码,就无法进入each方法,写了alert方法当时是为了看下我点击后有没有触发click方法,显然并没有,更别提数据了。所以正确的写法是
这样就能够给生成的元素绑定点击事件了。
主要的问题就是没有搞清楚jquery可以操作的元素,所以一直无法获取到自己想要找到的元素。
jquery操作ajax返回的页面元素的更多相关文章
- jquery实现ajax,返回json数据
jquery实现ajax可以调用几种方法 我经常用的是$get(url,data,callback,type)方法 其中url是异步请求的页面(可以是.ashx文件),data是参数,callback ...
- 使用jquery、ajax不刷新页面打印表格(返回数据类型text、json);
效果图: 一:返回数据是text时 1.表单代码: <body> <form action="#" method="post"> 姓名: ...
- jquery 操作ajax 相关方法
jQuery.get() 使用一个HTTP GET 请求从服务器加载数据. jQuery.get(url [,data] [,success(data,textStatus,jqXHR)] [dtaT ...
- JQuery操作Ajax
一.jQuery - AJAX 简介 AJAX = 异步 JavaScript 和 XML(Asynchronous JavaScript and XML). AJAX 是与服务器交换数据的艺术,它在 ...
- 使用jquery处理ajax返回XML
JS代码: 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 3 ...
- Jquery 等待ajax返回数据loading控件ShowLoading组件
1.意义 开发项目中,前台的页面要发请求到服务器,服务器响应请求返回数据到前台,这段时间,有可能因为返回的数据量较大导致前台页面出现短暂性的等待,此时如果用户因不知情而乱点击有可能造成逻辑混乱,所以此 ...
- jquery中ajax返回值无法传递到上层函数
function通过ajax调用获取后台数据,结果返回出来的结果均为空,代码如下: function chart_coinbase_getdata() { var test = {postdata:& ...
- jQuery解析AJAX返回的html数据时碰到的问题与解决
$.ajax({ type : "post", url : "<%=request.getContextPath()%>/ce/articledetail/m ...
- jquery 调用ajax返回json
ie调用可以,火狐和chrome皆失败,找了半天原因. 被屏蔽了. 火狐和chrome 对同一个域名不同端口的调用也严格限制,不给调用.只能用jsonp. 查看网络的返回状态,错误信息,F12 很重要 ...
随机推荐
- 约瑟夫问题的java实现
约瑟夫问题,又称丢手帕问题.试着实现了一下,实现逻辑简单,没有复杂的算法,适合新手参考. //参数step指步进值,步进到几则出列 //参数count指共有几个人 public static int ...
- oracle if else 判断
CREATE OR REPLACE FUNCTION fn_GetClassifyBymxmjazfs (v_azfs varchar2,v_mx varchar2,v_mj varchar2) re ...
- UOJ#117. 欧拉回路
#117. 欧拉回路 题目描述 有一天一位灵魂画师画了一张图,现在要你找出欧拉回路,即在图中找一个环使得每条边都在环上出现恰好一次. 一共两个子任务: 这张图是无向图.(50分) 这张图是有向图.(5 ...
- mysql数据一致性检查及修复
percona-toolkit-2.2.20-1.noarchmysql 5.6.29-logmaster:192.168.166.129slave:192.168.166.131 一.创建数据库校验 ...
- JS-兼容
[个人汇总] 1.JS判断是否点击回车键/enter键 $(document).keypress(function(event){ var keycode = (event.keyCode ? eve ...
- Maven之(一)Maven是什么
首先,Maven的正确发音是[ˈmevən],而不是"马瘟"以及其他什么瘟.Maven在美国是一个口语化的词语,代表专家.内行的意思,约等于北京话中的老炮儿. 一个对Maven比较 ...
- json字符串参数
jsp部分 json字符串的属性应该都是实体类的属性 function saveCashier(){ layer.closeAll(); var Reapply = document.g ...
- jndi 与 jdbc
现在开发中经常用到数据库的两种配置1 jdbc2 jndi 一般开发环境都会使用jdbc环境,自己弄配置方便.但是测试和生产环境一般都使用jndi方式.原因有:1 使用jndi方式配置,数据库的 ...
- Activiti工作流入门
Activiti简介 Activiti是一个开源的工作流引擎,它实现了BPMN 2.0规范,可以发布设计好的流程定义,并通过api进行流程调度. Activiti 作为一个遵从 Apache 许可的工 ...
- QQSpamerUpdate
2.00001,0,http://oia5k1lqi.bkt.clouddn.com/QQSpamer2.0%20BETA1.exe