一般而言，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. SQL中IS NOT NULL与!=NULL的区别

    平时经常会遇到这两种写法:IS NOT NULL与!=NULL.也经常会遇到数据库有符合条件!=NULL的数据,但是返回为空集合.实际上,是由于对二者使用区别理解不透彻. 默认情况下,推荐使用 IS ...

  2. php如何判断SQL语句的查询结果是否为空？

    PHP与mysql这对黄金搭档配合的相当默契,但偶尔也会遇到一些小需求不知道该怎么做,例如今天要谈到的:如何判断sql语句查询的结果集是否为空! 我们以查询学生信息为例,来看看究竟如何实现我们的需求. ...

  3. Shell入门基础

    Shell的Helloworld #!/bin/bash echo "helloworld taosir" 执行方式 方式一:用 bash 或 sh 的相对或绝对路径(不用赋予脚本 ...

  4. 关于约束ENABLE NOVALIDATE的一个疑问

    http://www.dbunix.com/?p=188 关于约束ENABLE NOVALIDATE的一个疑问 CREATE TABLE test (id varchar2(12), name var ...

  5. /tmp目录下执行脚本失败提示Permission denied

    Linux上执行Shell脚本运行失败提示Permission denied一个问题,挺好的问题,切中了知识盲点. 问题现象 Shell脚本在/tmp目录下,执行./test.sh运行失败,提示Per ...

  6. 【ACM】hdu_1095_A+BVII_201307261740

    A+B for Input-Output Practice (VII)Time Limit: 2000/1000 MS (Java/Others)    Memory Limit: 65536/327 ...

  7. innodb_support_xa=1

    mysql> show create table t; CREATE TABLE `t` ( `id` ) NOT NULL AUTO_INCREMENT, `num` ) DEFAULT NU ...

  8. javascript面向对象之Javascript 继承

    转自原文javascript面向对象之Javascript 继承 在JavaScript中实现继承可以有多种方法,下面说两种常见的. 一,call 继承 先定义一个“人”类 //人类 Person=f ...

  9. Android 最新面试题

    1. Intent的几种有关Activity启动的方式有哪些,你了解每一个含义吗? Intent的一些标记有FLAG_ACTIVITY_BROUGHT_TO_FRONT .FLAG_ACTIVITY_ ...

  10. Red Hat Linux分辨率调整

    在/etc/X11下手动产生xorg.conf文件, # vi /etc/X11/xorg.conf 文件中内容如下: ##Add the following codes: Section " ...