一般而言，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. [模板]FFT

    郝神并没有令我明白这个. 但是巨神的题解太强了. #include <iostream> #include <complex> #include <cmath> # ...

  2. Nginx面试中最常见的18道题 抱佛脚必备

    Nginx的并发能力在同类型网页服务器中的表现,相对而言是比较好的,因此受到了很多企业的青睐,我国使用Nginx网站的知名用户包括腾讯.淘宝.百度.京东.新浪.网易等等.Nginx是网页服务器运维人员 ...

  3. P1040 加分二叉树（树上记忆化搜素）

    这道题很水 但我没做出来……………………………… 我写的时候状态设计错了,设计dp[l][m][r]为从l到r以m为根的值 这样写遍历状态就是n^3的,会TLE. 而且写路径的时候是用结构体写的,这样 ...

  4. SpringBoot+FreeMarker开发word文档下载,预览

    背景: 开发一个根据模版,自动填充用户数据并下载word文档的功能 使用freemarker进行定义模版,然后把数据进行填充. maven依赖: <parent> <groupId& ...

  5. Ruby对象、变量和常量

    Ruby操作的数据主要有部分:对象.类.变量.常量. 对象 在Ruby中表示数据的基本单位称为对象,在Ruby中一切都是对象. 经常使用对象: 数值对象 2.3.14.-5等表示数字的对象,另外还有矩 ...

  6. [React] Update State Based on Props using the Lifecycle Hook getDerivedStateFromProps in React16.3

    getDerivedStateFromProps is lifecycle hook introduced with React 16.3 and intended as a replacement ...

  7. win server 2008 r2 iis+php 500错误内部服务器错误。

    今天遇到一个错误是iis 500错误,由于server是别人负责的.查看日志没什么异常,就发如今任务日志里发现有一段时间间隔没有记录.一開始不知道为什么.之后日志里就都是500错误了,在iis哪里配置 ...

  8. Cloud Card是否能干掉App

    算下来有一年没写blog了.这一年算是潜心做一件事情,随着云OS 3.0已公布.总算能够向外界表达了我们想做个啥,非常多人也開始质疑,Cloud Card究竟是个啥?云OS 3.0算不算自主研发的OS ...

  9. eclipse+maven的web项目访问jsp乱码

    在jsp中第一行加一句这个就不会乱码了 <%@ page language="java" import="java.util.*" pageEncodin ...

  10. 【cl】sikuli下载安装

    前提条件: 1.请确保你已经安装java 6 JRE 32位版本(如果是java 7 或者是64位JRE 那是不被支持的) 2.请确定你已经卸载的先前的sikuli版本(尤其是0.10.x版本) 3. ...