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实现的背景颜色渐变动画效果示例
Mar 24 jQuery
jQuery实现字体颜色渐变效果的方法
Mar 29 jQuery
jquery中关于bind()方法的使用技巧分享
Mar 30 jQuery
jQuery实现简单的滑动导航代码(移动端)
May 22 jQuery
jQuery模拟实现天猫购物车动画效果实例代码
May 25 jQuery
jQuery简单实现对数组去重及排序操作实例
Oct 31 jQuery
jQuery zTree搜索-关键字查询 递归无限层功能实现代码
Jan 25 jQuery
使用异步controller与jQuery实现卷帘式分页
Jun 18 jQuery
jQuery操作元素追加内容示例
Jan 10 jQuery
jquery+ajax实现异步上传文件显示进度条
Aug 17 jQuery
IDEA配置jQuery, $符号不再显示黄色波浪线的问题
Oct 09 jQuery
jQuery treeview树形结构应用
Mar 24 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
DOMXML函数笔记
2006/10/09 PHP
PHP5 安装方法
2006/10/09 PHP
PHP和JAVA中的重载(overload)和覆盖(override) 介绍
2012/03/01 PHP
PHP小教程之实现链表
2014/06/09 PHP
9条PHP编程小知识及易犯的小错误
2015/01/22 PHP
PHP基于PDO调用sqlserver存储过程通用方法【基于Yii框架】
2017/10/07 PHP
javascript 面向对象全新理练之继承与多态
2009/12/03 Javascript
仿猪八戒网左下角的文字滚动效果
2011/10/28 Javascript
js如何获取file控件的完整路径具体实现代码
2013/05/15 Javascript
写JQuery插件的基本知识
2013/11/25 Javascript
抛弃Nginx使用nodejs做反向代理服务器
2014/07/17 NodeJs
Web表单提交之disabled问题js解决方法
2015/01/13 Javascript
浅析JS动态创建元素【两种方法】
2016/04/20 Javascript
ionic实现可滑动的tab选项卡切换效果
2020/04/15 Javascript
Bootstrap中的Dropdown下拉菜单更改为悬停(hover)触发
2016/08/31 Javascript
js图片放大镜效果实现方法详解
2020/10/28 Javascript
jQuery EasyUI开发技巧总结
2017/09/26 jQuery
NW.js 简介与使用方法
2018/02/01 Javascript
解决vue项目使用font-awesome,build后路径的问题
2018/09/01 Javascript
在webstorm开发微信小程序之使用阿里自定义字体图标的方法
2018/11/15 Javascript
python爬虫之urllib3的使用示例
2018/07/09 Python
Flask之flask-script模块使用
2018/07/26 Python
FFrpc python客户端lib使用解析
2019/08/24 Python
python 视频下载神器(you-get)的具体使用
2021/01/06 Python
使用HTML5的File实现base64和图片的互转
2013/08/01 HTML / CSS
DHC美国官网:日本通信销售第一的化妆品品牌
2017/11/12 全球购物
ALDO英国官网:加拿大女鞋品牌
2018/02/19 全球购物
掌上明珠Java程序员面试总结
2016/02/23 面试题
个人工作表现评语
2014/04/30 职场文书
个人职业及收入证明
2014/10/13 职场文书
2015年劳动部工作总结
2015/05/23 职场文书
机关干部纪律作风整顿心得体会
2016/01/23 职场文书
2016年党员读书月活动总结
2016/04/06 职场文书
大学生暑期社会实践的个人总结!
2019/07/17 职场文书
2019运动会广播加油稿汇总
2019/08/21 职场文书
Python使用pandas导入csv文件内容的示例代码
2022/12/24 Python