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

$(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. node.js系列(实例):原生node.js实现静态资源管理

    /** * node入门之综合案例(一):简易路由 * @Author : by Ghost * @Date : 2016/07/11 * @Description : * 1.引入以下模块 * ht ...

  2. 初识JS

    今儿我遇到一特别恐怖的事儿,JS 刚开始的我看到JS感觉是懵逼的,翻开第一页,感觉是棒棒哒,再看第二页,感觉是easy的,看到第三页是恐怖的,当看到的第四页的时候,我感觉今年的清明节是为我准备的 废话 ...

  3. linux网口绑定笔记-bind

    模式0:balance-rr 模式1:active-backup 模式2:balance-xor 模式3:broadcast 模式4:802.3ad 模式5:balance-tlb 模式6:balan ...

  4. 内核初始化优化宏(__init, __devinit)

    在内核里经常可以看到__init, __devinit这样的语句,这都是在init.h中定义的宏,gcc在编译时会将被修饰的内容放到这些宏所代表的section. 原文地址:http://blog.c ...

  5. [进程管理]Linux进程状态解析之T、Z、X

             Linux进程状态:T (TASK_STOPPED or TASK_TRACED),暂停状态或跟踪状态.          向进程发送一个SIGSTOP信号,它就会因响应该信号而进入 ...

  6. 界面底部Tab实现

    现在基本上大部分的手机APP都要实现底部Tab,底部实现Tab的实现方式有很多种,那么有没有好的实现方式呢? 今天我将使用一个开源插件来实现底部Tab 参考自zhangli_的博客:http://bl ...

  7. 使用 Python 实现命令行词典(一)

    最近经常在服务器上开发,经常会遇到不认识的单词,然而 linux 下实在没有什么好用的词典,索性自己写一个好了. 词典 API 首先,Google 了一下可用的词典的 API,发现金山的 iciba ...

  8. python 错误之SyntaxError: Missing parentheses in call to 'print'

    SyntaxError: Missing parentheses in call to 'print' 由于python的版本差异,造成的错误. python2: print "hello ...

  9. Codeforces Round #410 (Div. 2)C题

    C. Mike and gcd problem time limit per test 2 seconds memory limit per test 256 megabytes input stan ...

  10. Hadoop技术在商业智能BI中的应用

    Hadoop是个很流行的分布式计算解决方案,是Apache的一个开源项目名称,核心部分包括HDFS及MapReduce.其中,HDFS是分布式文件系统,MapReduce是分布式计算引擎.时至今日,H ...