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

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

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

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

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

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

  1. jquery实现ajax,返回json数据

    jquery实现ajax可以调用几种方法 我经常用的是$get(url,data,callback,type)方法 其中url是异步请求的页面(可以是.ashx文件),data是参数,callback ...

  2. 使用jquery、ajax不刷新页面打印表格(返回数据类型text、json);

    效果图: 一:返回数据是text时 1.表单代码: <body> <form action="#" method="post"> 姓名: ...

  3. jquery 操作ajax 相关方法

    jQuery.get() 使用一个HTTP GET 请求从服务器加载数据. jQuery.get(url [,data] [,success(data,textStatus,jqXHR)] [dtaT ...

  4. JQuery操作Ajax

    一.jQuery - AJAX 简介 AJAX = 异步 JavaScript 和 XML(Asynchronous JavaScript and XML). AJAX 是与服务器交换数据的艺术,它在 ...

  5. 使用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 ...

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

    1.意义 开发项目中,前台的页面要发请求到服务器,服务器响应请求返回数据到前台,这段时间,有可能因为返回的数据量较大导致前台页面出现短暂性的等待,此时如果用户因不知情而乱点击有可能造成逻辑混乱,所以此 ...

  7. jquery中ajax返回值无法传递到上层函数

    function通过ajax调用获取后台数据,结果返回出来的结果均为空,代码如下: function chart_coinbase_getdata() { var test = {postdata:& ...

  8. jQuery解析AJAX返回的html数据时碰到的问题与解决

    $.ajax({ type : "post", url : "<%=request.getContextPath()%>/ce/articledetail/m ...

  9. jquery 调用ajax返回json

    ie调用可以,火狐和chrome皆失败,找了半天原因. 被屏蔽了. 火狐和chrome 对同一个域名不同端口的调用也严格限制,不给调用.只能用jsonp. 查看网络的返回状态,错误信息,F12 很重要 ...

随机推荐

  1. Linux文件系统十问,你知道吗?

    关于文件系统,相信大家都不陌生.身为攻城狮的我们几乎天天都会与之打交道,但是细深剖一下,其中又有多少是我们理解深度不够的呢.那么让我们一起来看一下下面这一组Linux文件系统相关的问题吧: 1.机械磁 ...

  2. HashMap完全解读

    一.什么是HashMap 基于哈希表的 Map 接口的实现.此实现提供所有可选的映射操作,并允许使用 null 值和 null 键.(除了非同步和允许使用 null 之外,HashMap 类与 Has ...

  3. linux下测试宽带速度

    speedtest-cli是一个用Python编写的轻量级Linux命令行工具,在Python2.4至3.4版本下均可运行.它基于Speedtest.net的基础架构来测量网络的上/下行速率.安装sp ...

  4. JS高程5.引用类型(5)Array类型的操作方法

    一.操作方法 1.concat()方法 基于当前数组中的所有项创建一个新数组.具体说,是先创建当前数组的一个副本,然后将接收到的参数添加到这个副本的末尾,最后返回新构建的数组.在没有给concat() ...

  5. 结构-行为-样式-Js函数节流

    最近一个面试官问了我一个函数节流的问题,然后感觉自己工作中遇到过这个问题,但是不知道这种形式就是函数节流.下面我来说下这个Js的高级问题,思路:函数节流就是防止用户高频调用某个事件而做的Js层面的处理 ...

  6. 结构-行为-样式-PS笔记

    1.矩形选框,按住Shift就可以成为正圆或者正方形.按住ALt就可以控制圆心的位置: 2.美颜:滤镜--模糊--回到开始--历史记录工具,去掉不要的地方. 3.套索工具双击闭合:4.钢笔工具是做选区 ...

  7. 【Backbone】 Backbone初探

    前言 在此之前研究了一段React,但是不得不承认React.Vue等MVVM框架相对于原有的Jquery来说,简直是翻天覆地的不同.它们之间的差异不仅仅体现在框架思维的不同,而是ES5到ES6的编程 ...

  8. Kattis - Biased Standings

    Biased Standings Usually, results of competitions are based on the scores of participants. However, ...

  9. 关于web多标签多条件筛选的思考以及缓存的正确使用方法(上)

    做项目的过程中,发现一次远程链接数据库的耗时大概是300ms~400ms,切身体会到了前辈们经常说的减少链接的重要性,用了缓存后页面的打开时间从1.5s减少到400ms 前提: 那么来说一说正题,we ...

  10. Elasticsearch 5.0 安装 Search Guard 5 插件 (五)

    一.Search Guard 简介 Search Guard  是 Elasticsearch 的安全插件.它为后端系统(如LDAP或Kerberos)提供身份验证和授权,并向Elasticsearc ...