JQuery Ajax 异步操作之动态添加节点功能


Posted in jQuery onMay 24, 2017

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

$(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:;" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" class="remove">删除</a>' +
             
'<a href="javascript:;" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" 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:;" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" class="remove">删除</a>' +
             
'<a href="javascript:;" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" class="change">修改</a>' +
             '</div>';
        });$('body').append(newInfo);
        // 当动态添加节点完成之后再给其中的按钮绑定事件
        $('.remove').click(function(){


    

alert('这是删除按钮!');

     
 });
      },
      error:function (err) {





 alert(err);




}
    });
  }
}

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

以上所述是小编给大家介绍的JQuery Ajax 异步操作之动态添加节点功能,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

jQuery 相关文章推荐
jQuery插件FusionCharts实现的Marimekko图效果示例【附demo源码】
Mar 24 jQuery
jQuery判断邮箱格式对错实例代码讲解
Apr 12 jQuery
jQuery操作css样式
May 15 jQuery
jQuery操作DOM_动力节点Java学院整理
Jul 04 jQuery
jQuery EasyUI的TreeGrid查询功能实现方法
Aug 08 jQuery
jquery鼠标悬停导航下划线滑出效果
Sep 29 jQuery
jQuery length 和 size()区别总结
Apr 26 jQuery
学习jQuery中的noConflict()用法
Sep 28 jQuery
基于 jQuery 实现键盘事件监听控件
Apr 04 jQuery
通过JQuery,JQueryUI和Jsplumb实现拖拽模块
Jun 18 jQuery
jQuery插件simplePagination的使用方法示例
Apr 28 jQuery
基于jquery实现彩色投票进度条代码解析
Aug 26 jQuery
使用jQuery.Pin垂直滚动时固定导航
May 24 #jQuery
jquery append与appendTo方法比较
May 24 #jQuery
jQuery日期范围选择器附源码下载
May 23 #jQuery
最常用的jQuery表单验证(简单)
May 23 #jQuery
jquery实现简单实用的轮播器
May 23 #jQuery
jquery实现图片轮播器
May 23 #jQuery
jQuery实现简单的滑动导航代码(移动端)
May 22 #jQuery
You might like
使用PHP获取网络文件的实现代码
2010/01/01 PHP
深入PHP异步执行的详解
2013/06/03 PHP
PHP使用逆波兰式计算工资的方法
2015/07/29 PHP
laravel-admin 在列表页添加自定义按钮的例子
2019/09/30 PHP
JQuery页面图片切换和新闻列表滚动效果的具体实现
2013/09/26 Javascript
JavaScript 变量、作用域及内存
2015/04/08 Javascript
利用HTML5的画布Canvas实现刮刮卡效果
2015/09/06 Javascript
Javascript中的Prototype到底是什么
2016/02/16 Javascript
详解vue-cli 脚手架项目-package.json
2017/07/04 Javascript
微信小程序学习之数据处理详解
2017/07/05 Javascript
Angularjs 事件指令详细整理
2017/07/27 Javascript
使用MUI框架模拟手机端的下拉刷新和上拉加载功能
2017/09/04 Javascript
NodeJS设计模式总结【单例模式,适配器模式,装饰模式,观察者模式】
2017/09/06 NodeJs
JS中间件设计模式的深入探讨与实例分析
2020/04/11 Javascript
vue element table中自定义一些input的验证操作
2020/07/18 Javascript
Python使用Dijkstra算法实现求解图中最短路径距离问题详解
2018/05/16 Python
Python numpy实现二维数组和一维数组拼接的方法
2018/06/05 Python
Python实现多属性排序的方法
2018/12/05 Python
搞清楚 Python traceback的具体使用方法
2019/05/13 Python
Python异常处理例题整理
2019/07/07 Python
使用Matplotlib 绘制精美的数学图形例子
2019/12/13 Python
使用CSS3中的calc()属性来以算式表达尺寸数值
2016/06/06 HTML / CSS
css3加js做一个简单的3D行星运转效果实例代码
2017/01/18 HTML / CSS
Eton丹麦官网:精美的男式衬衫
2020/05/27 全球购物
儿科护士自我鉴定
2013/10/14 职场文书
社区学雷锋活动策划方案
2014/01/30 职场文书
软件专业毕业生个人自我鉴定
2014/04/17 职场文书
车辆工程专业求职信
2014/04/28 职场文书
会计专业毕业生自荐书
2014/06/25 职场文书
学生保证书格式
2015/02/27 职场文书
接待员岗位职责范本
2015/04/15 职场文书
2019个人工作计划书的格式及范文!
2019/07/04 职场文书
Go语言基础知识点介绍
2021/07/04 Golang
详细聊聊MySQL中慢SQL优化的方向
2021/08/30 MySQL
golang中的struct操作
2021/11/11 Golang
Python学习之os包使用教程详解
2022/03/21 Python