异步操作动态添加节点,导致在代码中给添加的节点全局绑定事件或者获取元素无效,上代码:

$(function () {
var IP = '...'; // 页面中的默认编号起始值 和 公用IP前缀
showData();
function showData() {
if ($('.content')) $('.content').remove();
$.ajax({
url:IP + '/get',
type:'get',
success:function (data) {
var newInfo = '';
if(!data) return alert('对不起,没有数据可供操作!');
newInfo +='<div class="btnBox">' +
  '<a href="javascript:;" class="remove">删除</a>' +
  '<a href="javascript:;" class="change">修改</a>' +
'</div>';
});$('body').append(newInfo);
},
error:function (err) {
         alert(err);
       }
});
}
}
//这是一段很明显的通过JQuery-ajax前后台交互并动态添加的代码;
//但是,如果你在该方法(showData())外面来给上述动态添加的a标签添加事件或者获取值的时候可能会出现无效的情况:
  $('.remove').click(function(){
    alert('这是删除按钮!');
  });
  //页面中则不会弹出(这是删除按钮!)的弹框;

那么,问题出在哪里呢?

事实上,ajax从后台获取数据再显示到我们的页面中的过程是异步的,也就是说当我们利用ajax从后台获取值得时候,在ajax之后的代码是一直往下执行着走的,而不会等着你ajax获取并创建节点完成后再往下继续执行,这便是异步请求的机制,对于这个问题我们怎么解决呢:

$(function () {
var IP = '...'; // 页面中的默认编号起始值 和 公用IP前缀
showData();
function showData() {
if ($('.content')) $('.content').remove();
$.ajax({
url:IP + '/get',
type:'get',
success:function (data) {
var newInfo = '';
if(!data) return alert('对不起,没有数据可供操作!');
newInfo +='<div class="btnBox">' +
  '<a href="javascript:;" class="remove">删除</a>' +
  '<a href="javascript:;" class="change">修改</a>' +
'</div>';
});$('body').append(newInfo);
// 当动态添加节点完成之后再给其中的按钮绑定事件
$('.remove').click(function(){
         alert('这是删除按钮!');
      });
},
error:function (err) {
           alert(err);
        }
});
}
}
 

将绑定事件的代码改到ajax内部,这样让动态添加完成之后再给其中的按钮绑定事件,就可以达到我们所需要的效果了,这便是ajax的异步机制

在以后的项目开发中,希望朋友们能够正确理解ajax的机制,希望本篇随笔能够对你有所帮助!

JQuery--Ajax 异步操作 动态添加节点 (新人试水,求支持)的更多相关文章

  1. jquery mobile Checkbox动态添加刷新及事件绑定

    jquery mobile Checkbox动态添加刷新及事件绑定 在微信项目中,涉及到一个多选功能.数据来自后台数据库,需要动态加载. 项目结构:微信api+web app.使用jquery mob ...

  2. PHP+Jquery+Ajax 实现动态生成GUID、加载GUID

    GUID: 全局唯一标识符(GUID,Globally Unique Identifier)是一种由算法生成的二进制长度为128位的数字标识符.GUID主要用于在拥有多个节点.多台计算机的网络或系统中 ...

  3. 如何解决jQuery Validation针对动态添加的表单无法工作的问题?

    为了充分利用ASP.NET MVC在服务端呈现HTML的能力,在<利用动态注入HTML的方式来设计复杂页面>一文中介绍了,通过Ajax调用获取HTML来呈现复杂页面中某一部分界面的解决方案 ...

  4. Hadoop 2.6.0动态添加节点

    文章出自:http://my.oschina.net/leoleong/blog/477508 本文主要从基础准备,添加DataNode和添加NodeManager三个部分详细说明在Hadoop2.6 ...

  5. jQuery如何获取动态添加的元素

    1. 使用 on()方法        本质上使用了事件委派,将事件委派在父元素身上     自 jQuery 版本 1.7 起,on() 方法是 bind().live() 和 delegate() ...

  6. jquery监听动态添加的input的change事件

    使用下面方法在监听普通的input的change事件正常 $('#pp').on('change', 'input.videos_poster_input', function () { consol ...

  7. [转] JQuery UI Tabs 动态添加页签,并跳转到新页签

    [From] https://blog.csdn.net/zhangfeng2124/article/details/76672403 需求: 1.tabs默认只有一个页签,但是需要点击某按钮,动态添 ...

  8. 创建B树,动态添加节点,并使用三种遍历算法对树进行遍历

    ks17:algorithm apple$ cat btree_test.c ///********************************************************** ...

  9. 给div中动态添加节点并设置样式

    前端IOS今天需要动态的在图片前面添加一个按钮 主要是在使用 bt.setAttribute("class","aaa"); 可以对创建的节点使用setAttr ...

随机推荐

  1. Laravel框架一:原理机制篇

    Laravel作为在国内国外都颇为流行的PHP框架,风格优雅,其拥有自己的一些特点.以下是本人一点粗浅的认识,不敢奢求他人同意,更不能一一而足,仅为自己做一点总结而已. 一. 请求周期 Laravel ...

  2. AngularJS创建新指令 - 函数功能

    首先先介绍下AngularJS指令下的几种函数 Link函数和Scope 指令生成出的模板其实没有太多意义,除非它在特定的scope下编译.默认情况下,指令并不会创建新的子scope.更多的,它使用父 ...

  3. zabbix主动上报的python脚本

    本代码linux.window平台通用. 不过我遇到一个Windows2008缺少运行库的提示,可能这个是Python3.6开发的.需要安装vc2015运行库吧.我没调试成功. linux平台还可以监 ...

  4. spring cloud 集成 swagger2 构建Restful APIS 说明文档

    在Pom.xml文件中引用依赖 <dependencies> <dependency> <groupId>org.springframework.cloud< ...

  5. php代码效率小常识

    1, 尽量不要使用@来进行抑制错误,效率很低 2,能使用单引号时不要使用双引号 3,echo的效率比print要高,同时echo可以输出多个变量 4,使用include,require时候最好使用绝对 ...

  6. Mysql,zip格式安装、修改密码、建库

    Mysql,zip格式 1. Mysql 主目录最好别带有"- ."之类的字符 2. Mysql 配置环境变量 Path 环境变量后加上 mysql解压路径:eg:E:\mysql ...

  7. poj2155二维树状数组

    Given an N*N matrix A, whose elements are either 0 or 1. A[i, j] means the number in the i-th row an ...

  8. Windows 10 碎片整理程序使用

    1.打开 此电脑 2.右击任意一个磁盘,这里以C盘为例,点击 属性 3.点击 工具  选项卡--->优化 4.选中其中的一个盘  优化 5.然后静等结束,就好啦. 虽然不知道有什么用,...

  9. Android 窗口全屏

    全屏getWindow().addFlags(WindowManager.LayoutParams.FLAG_FULLSCREEN); 取消全屏 getWindow().clearFlags(Wind ...

  10. Android计时器 android.widget.Chronometer

    说起做定时器,大家一般会想到Timer和Executors的定时器线程池,其实用这两个做都会有问题,在停止和重新计时时你回发现无法停止或者说计时加快(加快是因为多个线程在记录同一个变量),Androi ...