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

$(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. 【R】正态检验与R语言

    正态检验与R语言 1.Kolmogorov–Smirnov test 统计学里, Kolmogorov–Smirnov 检验(亦称:K–S 检验)是用来检验数据是否符合某种分布的一种非参数检验,通过比 ...

  2. html基础认识,高手别看

    HTML5是一种用于在万维网上构建和呈现内容的符号言语.它是HTML规范的第五和当时版别.它是由万维网联盟(W3C)在十月发布的2014 [ 2 ] [ 4 ]和最新的多媒体支持进步言语,一起坚持它简 ...

  3. 转 JSON与XML转换

    这两天处理模块的联调工作,在json与XML转换中出现了一些奇怪的问题,仔细究来,实为对org.json.*包知之太少.晚上baidu.google一下,找出了问题出现的原因.在模块中,使用了两个方法 ...

  4. oracle linux 6.5 安装 oracle 12cR2数据库(2)-DBCA建库

    援引:http://www.cnblogs.com/kerrycode/p/3386917.html  by 潇湘隐者 Oracle 12C引入了CDB与PDB的新特性,在ORACLE 12C数据库引 ...

  5. HTML5工具做屏幕自适应的两种方法

    近一两年,HTML5在中国很火,也出了不少HTML5工具和模板.别的先不说,对于不同的H5工具,解决屏幕自适应问题的区别是什么? 简单来说,感应式设计是当用不同设备访问时,能够根据设备的宽度和高度对设 ...

  6. keydown - > keypress - > keyup 用法和区别

    英文输入法:   事件触发顺序:keydown - > keypress - > keyup   中文输入法:   firfox:输入触发keydown,回车确认输入触发keyup chr ...

  7. angular控制器之间的传值

    每个controller都会有自己的scope,所有的scope都是属于 $rootScope的子或者子的子... 那么问题就好解决了,通过 $rootScope.$broadcast 广播的事件每个 ...

  8. chrome主页被篡改 成hao123

    应该是开了个从流氓网站下的蓝灯,然后发现主页被篡改 尝试chrome设置修改无效,应该是快捷方式被改了 系统 win10 1.打开对应的下面两个地址,找到chrome的快捷方式,右键属性 C:\Use ...

  9. 写给Android App开发人员看的Android底层知识(3)

    (七)App启动流程第2篇 书接上文,App启动一共有七个阶段,上篇文章篇幅所限,我们只看了第一阶段,接下来讲剩余的六个阶段,仍然是拿斗鱼App举例子. 简单回顾一下第一阶段的流程,就是Launche ...

  10. Linux 安装USB摄像头

    sudo apt-get update sudo apt-get install fswebcam sudo apt-get install mplayer sudo apt-get install ...