jquery操作ajax返回的页面元素

  这两天工作不忙,正好从朋友那里拿到一个某个应用的开发文档,相关数据放在了mongodb里,自己电脑可以本地开启服务器然后通过给的借口来获取数据。由于这是一个比较大比较全的一个完整项目,也没有那么多经历全部做一下,就找了其中几部分来做一下,由于是一个电商类的移动端,所以那些数据都是动态加载上去的,通过ajax动态获取然后添加到页面上,所以主要是模板引擎的使用和ajax的运用,其他就是一些样式的操作。虽然以前也做过,但是这次碰到了一个问题,就是需要在ajax返回的内容里找到某个元素,然后给那个元素绑定事件。其实思路是很清晰的,就是和平时的绑定元素一样,通过jquery选择器找到元素,进行相关操作就好,但是就这样,一直就是无法成功的绑定事件,纠结了差不多1个小时多,终于经过实践和网上的相关帮助,找到了原因。

   因为页面上的元素都是动态加载出来的,所以并不是写死的静态,所以相关元素一开始是不存在于页面上的,除了顶部和底部其他都是没有的,但是却可以在css样式表里操作这些动态生成的元素的样式,就是和平常没有使用动态加载数据一样,但是为什么样式可以操作,事件却不能操作了呢?我发现操作样式的时候就是正常的添加类名,然后层级下来写样式,完全没有问题,可是给那些元素绑定事件的时候也是通过类名进行绑定,但就是没办法,后来查了下资料,发现jquery操作的dom元素是要在当前页面上的,那些动态加载出来的元素不属于当前页面。所以,要怎么才能操作这些元素呢?方法就是绑定事件的函数写在success函数下,当ajax成功获取到数据,并且放到页面上后,直接在后面操作事件,不要跳出到ajax方法外面的函数去操作。

上面的代码,就无法进入each方法,写了alert方法当时是为了看下我点击后有没有触发click方法,显然并没有,更别提数据了。所以正确的写法是

这样就能够给生成的元素绑定点击事件了。

  主要的问题就是没有搞清楚jquery可以操作的元素,所以一直无法获取到自己想要找到的元素。

时间: 2024-12-29 01:51:03

jquery操作ajax返回的页面元素的相关文章

jquery操作Ajax返回的JSON值

$.post( 'XXX.php', { col: value }, function(data) { var getData = eval( "(" + data + ")" ); //必须用括号,真蛋疼 alert( getData.xx ); } ); jquery操作Ajax返回的JSON值,布布扣,bubuko.com

jQuery操作iframe子页中元素代码实例

jQuery操作iframe子页中元素代码实例:本章节介绍一下如何在父页面中操作iframe子页面中的元素,希望能够给需要的朋友带来一定的帮助.一.父页面代码: <!DOCTYPE html> <html> <head> <meta charset=" utf-8"> <meta name="author" content="http://www.softwhy.com/" /> <

JQuery 操作 AJAX

JQuery 操作 AJAX Table of Contents .ajax .load – get .load – post .load – 回调函数 .load 解析 json .load 解析 xml .get 解析 json .post 和 xml .post 和 json 相关阅读 $.ajax $(DOM).load 包含 get 和 post 方式, 请求的数据会放在 DOM 里面 $.post $.get .ajax // json $.ajax({ type: "POST&qu

jquery实现ajax,返回json数据

jquery实现ajax可以调用几种方法 我经常用的是$get(url,data,callback,type)方法 其中url是异步请求的页面(可以是.ashx文件),data是参数,callback是回调函数,而type是返回数据的类型.type有xml,html,json,text等. 首先,页面引用jquery.js 在页面写ajax处理的js函数 1 2 3 4 5 6 7 8 9 10 11 12 13 function initMeeting() {             $.ge

jquery 或ajax返回的中文数据总是乱码解决方案

要将Servlet中的 response.setContentType("text/html;charset=utf-8")这行代码放在 PrintWriter out = response.getWriter()之前. jquery 或ajax返回的中文数据总是乱码解决方案,布布扣,bubuko.com

JQuery操作Ajax

今天就来说说jquery对于ajax的支持,jquery封装了XMLHttpRequest的底层实现,直接调用提供的方法即可 1.$.ajax(options) 这个方法是jquery对于ajax最为全面的支持,$.ajax(options)既可以发送GET请求,也可以发送POST请求等等,因此我们通过这个方法可以获得ajax交互的所有控制权. 该方法中包含了一个参数options,该参数的形式为{key1:val1,key2:val2,key3:val3....},如 { url:delTag

jquery 操作ajax 相关方法

jQuery.get() 使用一个HTTP GET 请求从服务器加载数据. jQuery.get(url [,data] [,success(data,textStatus,jqXHR)] [dtaType]) url 一个包含发送请求的URL data 发送给服务器的字符串后键值对 success() 当请求成功时回调的函数 dataType 从服务器返回的预期数据. 用法: $.get("test.cgi", { name: "John", time: &quo

使用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 35 <%@ page language="java" import="java.util.*" pageEncoding="gbk"%> <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.

Jquery 等待ajax返回数据loading控件ShowLoading组件

1.意义 开发项目中,前台的页面要发请求到服务器,服务器响应请求返回数据到前台,这段时间,有可能因为返回的数据量较大导致前台页面出现短暂性的等待,此时如果用户因不知情而乱点击有可能造成逻辑混乱,所以此时需要在加载数据中将前台进行提示在加载数据中,利用jquery的遮罩组件可以完成这个功能需求. 2.实现步骤 (1).下载 showLoading.css    jquery.showLoading.min.js  两个文件. (2).在jsp中引入这两个文件 <link href="styl