一般而言，js代码都放在页面的底部。在做项目的过程中，发现放在底部的代码没有执行，原来操作的是ajax生成的部分。这时候，页面加载js的顺序就要小心了。例子如下：

<!doctype html>

<html>

<head>

<meta charset="utf-8">

<title>无标题文档</title>

</head>

<body>

	<div id="ajaxContent"></div>

<script src="http://apps.bdimg.com/libs/jquery/2.1.1/jquery.min.js"></script>

<script>

	var param1="";

	 var html = '';

	 $.ajax({

             type: "post",

             url: "test.json",

             data: {username:$("#username").val(), content:$("#content").val()},

             dataType: "param1="+param1,

             success: function(data){

                         $.each(data, function(commentIndex, comment){

                               html += '<div class="comment"><h6>' + comment['username']

                                         + ':</h6><p class="para"' + comment['content']

                                         + '</p></div>';

                         });

                         $('#ajaxContent').append(html);

                      }

         });

		 //操作ajax部分

		 $('.comment').css('color','red');

</script>

</body>

</html>

　　

Ajax没有完成，这时候，页面元素还不完整，操作ajax生成部分的代码其实已经执行了，而jquery没有选中页面元素又不会报错，参见：http://www.cnblogs.com/xiaochongchong/p/5497343.html 。

解决方法：把底部的代码封装成一个函数，然后等待ajax请求成功，页面生成完整后。后调用这个函数。对上面例子的稍加修改：

<!doctype html>

<html>

<head>

<meta charset="utf-8">

<title>无标题文档</title>

</head>

<body>

	<div id="ajaxContent"></div>

<script src="http://apps.bdimg.com/libs/jquery/2.1.1/jquery.min.js"></script>

<script>

	 var param1="";

	 var html = '';

	 //ajax请求

	 $.ajax({

             type: "post",

             url: "test.json",

             data: {username:$("#username").val(), content:$("#content").val()},

             dataType: "param1="+param1,

             success: function(data){

                         $.each(data, function(commentIndex, comment){

                               html += '<div class="comment"><h6>' + comment['username']

                                         + ':</h6><p class="para"' + comment['content']

                                         + '</p></div>';

                         });

                         $('#ajaxContent').append(html);

						 //append成功后操作生成的部分

						 operate();

                      }

         });

		 //操作ajax部分，封装函数

		 function operate(){

		 $('.comment').css('color','red');

		 }

</script>

</body>

</html>

　　

总结：js操作ajax生成的部分。操作的代码，应该放页面生成之后。

如果要对ajax生成的部分添加事件。除了上面的做法：在ajax数据获取到，append到整个页面中之后再添加。除此之外，还可以用事件代理的方法实现，原生js的可以实现，jquery也可以实现。

Jquery事件代理（委托）主要用到两个方法：live()，delegate()。详细说明参考

http://blog.csdn.net/xxd851116/article/details/8646899

操作ajax生成页面的一个问题的更多相关文章

  1. 利用 html的锚点（元素a）功能实现ajax单页面应用的浏览器后退前进功能

    一.问题 随着AJax技术的普及,单页面web程序的应用越来越广泛. 所谓单页面应用程序,简单的说,就是应用只有一个主网页,第一次加载后,后续页面只会利用js和ajax到服务器获取数据进行页面的局部刷 ...

  2. js页码生成库，一个适合前后端分离的页码生成器

    原文:js页码生成库,一个适合前后端分离的页码生成器 前言 上星期写的任务里面有需要进行分页的处理,git搜索了一番,没有觉得合适的,于是自己临时写了个分页的算法. 然后等闲下来的时候,决定把分页进行 ...

  3. Ajax实现页面跳转与结果返回

    ajax实现页面局部跳转与结果返回 1.带有结果返回的提交过程 这里用一个提交按钮来演示,HTML代码为: <input type="button" class=" ...

  4. jquery 操作ajax 相关方法

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

  5. Python PageFactory-使用配置文件动态生成页面PageObject

    需求 在Python Selenium 的 PageObject模式中,一般每个页面需要写一个类, 一种PageObject的写法如下: class BaiduPageObject(object): ...

  6. JS组件系列——BootstrapTable+KnockoutJS实现增删改查解决方案（四）：自定义T4模板快速生成页面

    前言:上篇介绍了下ko增删改查的封装,确实节省了大量的js代码.博主是一个喜欢偷懒的人,总觉得这些基础的增删改查效果能不能通过一个什么工具直接生成页面效果,啥代码都不用写了,那该多爽.于是研究了下T4 ...

  7. 调试台自动多出现一个'&#65279;' ，我 用uploadify上传图片时，在给页面写入一个返回值为图片名称的变量的值的时候值的前面始终多出现一个'&#65279;'

    对你有助请点赞,请顶,不好请踩------送人玫瑰,手留余香! 15:54 2016/3/12用uploadify上传图片时,在给页面写入一个返回值为图片名称的变量的值的时候值的前面始终多出现一个' ...

  8. SharePoint 2013 Ajax 造成页面无法编辑

    1.如下图,在编辑页面的时候,出现如下错误“此网页自上次打开后已被修改,必须再次打开该网页”,页面上没有什么特别的设置,就是default.aspx: 2.编辑之前页面,只有一个内容编辑器部件,和若干 ...

  9. [转] C#操作EXCEL,生成图表的全面应用

    gailzhao 原文 关于C#操作EXCEL,生成图表的全面应用 近来我在开发一个运用C#生成EXCEL文档的程序,其中要根据数据生成相应的图表,该图表对颜色和格式都有严格的要求,在百度和谷歌中搜索 ...

随机推荐

  1. 移动端rem.js使用方法

    下面的代码一是我根据rem的使用经验,自己写的一个rem.js,发现很好用,能适用所有移动端h5页面的自适应需求: 代码一: ``` window.onload = function(){ /*720 ...

  2. 2018ICPC南京

    可能上一次秦皇岛拿了银,有了偶像包袱? 打的时候感觉状态不是很好. 第一题,让你每次将连续一段区间的石头都拿掉.. 然后让你做个博弈. 橘子一顿分析,认为k+1的倍数都是输. 这时,我们以及默认i+1 ...

  3. 【hihoCoder挑战赛28 A】异或排序

    [题目链接]:http://hihocoder.com/problemset/problem/1509 [题意] [题解] 每次找到相邻两个数的二进制形式中; 不同的最高位; 显然S在这一位必然是确定 ...

  4. Spring事务的传播行为分析

    前言 最近项目有涉及到Spring事务,所以工作之余,想认真了解学习下Spring事务,查阅了若干资料,做了一个demo(PS:参考了大牛的). 现分享总结如下: 1.Spring 事务的简介 理解事 ...

  5. 数学之路-python计算实战(4)-Lempel-Ziv压缩(2)

    Format characters have the following meaning; the conversion between C and Python values should be o ...

  6. iOS开发-自己定义重用机制给ScrollerView加入子视图

    事实上这个问题我非常早就想过,仅仅是没有通过去写程序实现,昨天有人提起,我就巧了一下 不知道大家打印郭tableview:cellforrow中cell初始的次数,也就是重用池中的cell个数.这个是 ...

  7. 调试中的step into step over step out

    step into/step out/step over的差别 step into就是单步运行,遇到子函数就进入而且继续单步运行: step over是在单步运行时,在函数内遇到子函数时不会进入子函数 ...

  8. Linux系统调用具体解释（怎样从用户空间进入内核空间）

    系统调用概述 计算机系统的各种硬件资源是有限的,在现代多任务操作系统上同一时候执行的多个进程都须要訪问这些资源,为了更好的管理这些资源进程是不同意直接操作的,全部对这些资源的訪问都必须有操作系统控制. ...

  9. Java中对象与引用

    初学Java 时.在非常长一段时间里,总认为基本概念非常模糊. 后来才知道.在很多Java 书中.把对象和对象的引用混为一谈. 假设分不清对象与对象引用,那实在没法非常好地理解以下的面向对象技术.把自 ...

  10. HttpServletRequest对象小结

    当客户端通过HTTP协议访问服务器时,请求所有信息都封装在HttpServletRequest对象中,可通过它获取到请求的所有信息,其常用方法如下: getRequestURL方法返回客户端发出请求时 ...