一般而言，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. 阿里云对象存储服务，OSS使用经验总结，图片存储，分页查询

    阿里云OSS-使用经验总结,存储,账号-权限,分页,缩略图,账号切换 最近项目中,需要使用云存储,最后选择了阿里云-对象存储服务OSS.总的来说,比较简单,但是仍然遇到了几个问题,需要总结下. 1.O ...

  2. hdu 1250 简单大整数加法

    #include<stdio.h> #include<string.h> #define N 3100 int a[N],b[N],c[N],d[N],e[N]; int ma ...

  3. 只读事务（@Transactional(readOnly = true)）的一些概念

    念:从这一点设置的时间点开始(时间点a)到这个事务结束的过程中,其他事务所提交的数据,该事务将看不见!(查询中不会出现别人在时间点a之后提交的数据) 应用场合: 如果你一次执行单条查询语句,则没有必要 ...

  4. i=i+1，i+=1与i++的区别

    1. i=i+1 a.读取右i的地址 b,i=1 c.读取左i的地址 d. 值赋给左i 2.i+=1 a.读取左i的地址 b.i+1 c.值给i 3.i++ a.读取右i的地址 b.值加1

  5. oracle BBED 直接改动数据库block块

    1.BBED配置 1)将相应文件放到$ORACLE_HOME/rdbms/mesg和$ORACLE_HOME/rdbms/lib中:     --将lib中bbedus.msb和bbedus.msg ...

  6. CefSharp 设置cookie

    设置cookie var cookieManager = CefSharp.Cef.GetGlobalCookieManager(); await cookieManager.SetCookieAsy ...

  7. C# List数据批量更新

    针对单条数据一般都是update语句直接更新 例如:update UserTable set UserName='小名'   where userid=xxx 但是如果是针对List数据组进行更新的话 ...

  8. 读取url中某个值

    url="http://test.plus.1course.cn/Task/Display?id=25942" print(url) result=url.split('/')[- ...

  9. 去哪网实习总结：JavaWeb配置404页面（JavaWeb）

    本来是以做数据挖掘的目的进去哪网的,结构却成了系统开发. .. 只是还是比較认真的做了三个月,老师非常认同我的工作态度和成果... 实习立即就要结束了,总结一下几点之前没有注意过的变成习惯和问题.分享 ...

  10. 写个js动态调整图片宽高 （原创）

    <body style="TEXT-ALIGN: center;"> <div id="testID" style="backgro ...