一般而言，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. hdu 3001（三进制状压）

    题目 解法 看到这道题,我们就会想到旅行商问题.但是这里每一个点可以经过最多两次,所以我们用三进制表示就好了. 代码 #include <iostream> #include <cs ...

  2. 26.bulk批量操作

    主要知识点 1.bulk语法 2.bulk使用时的注意事项 3.bulk size 对es性能的影响     一.bulk语法 每一个操作要两个json串(delete操作除外),每个json串占一行 ...

  3. fzu 2136

    #include<stdio.h> #define inf 1000000000 #define N 110000 int a[N]; struct node { int start,en ...

  4. 设置Jmeter默认中文页面

    下载安装好Jmeter后默认的是英文,对于我这种学渣来说简直就是受到了1000000点攻击. 所以,如何把英文界面换成中文呢? 方法一(从网上看到的) 启动Jmeter找到 options >c ...

  5. redis-事务-transaction

    redis的目标的是: 简洁,高效,由于事务本身就是一个很复杂的东西,所有我们不能把事务做的太复杂... multi,exec 127.0.0.1:6379> multi OK 127.0.0. ...

  6. POJ 3335

    /*半平面交求核心的增量法: 假设前N-1个半平面交,对于第N个半平面,只需用它来交前N-1个平面交出的多边形. 算法开始时,调整点的方向为顺时针方向,对于是否为顺时针,只需求出其面积,若为正,必为逆 ...

  7. POJ 2607

    一次FLOYD,再枚举. 注意题目要求的输出是什么哦. #include <iostream> #include <cstdio> #include <cstring&g ...

  8. [Angular] Increasing Performance by using Pipe

    For example you make a function to get rating; getRating(score: number): string { let rating: string ...

  9. angularjs时间轴

    1.炫酷的图片是开端啊 watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQv/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA ...

  10. [ Javascript ] 内存泄露以及循环引用解析

    内存泄露 在javascript中,我们非常少去关注内存的管理. 我们创建变量,使用变量,浏览器关注这些底层的细节都显得非常正常. 可是当应用程序变得越来越复杂而且ajax化之后,或者用户在一个页面停 ...