JQuery--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);
},
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 异步操作 动态添加节点 (新人试水,求支持)的更多相关文章
- jquery mobile Checkbox动态添加刷新及事件绑定
jquery mobile Checkbox动态添加刷新及事件绑定 在微信项目中,涉及到一个多选功能.数据来自后台数据库,需要动态加载. 项目结构:微信api+web app.使用jquery mob ...
- PHP+Jquery+Ajax 实现动态生成GUID、加载GUID
GUID: 全局唯一标识符(GUID,Globally Unique Identifier)是一种由算法生成的二进制长度为128位的数字标识符.GUID主要用于在拥有多个节点.多台计算机的网络或系统中 ...
- 如何解决jQuery Validation针对动态添加的表单无法工作的问题?
为了充分利用ASP.NET MVC在服务端呈现HTML的能力,在<利用动态注入HTML的方式来设计复杂页面>一文中介绍了,通过Ajax调用获取HTML来呈现复杂页面中某一部分界面的解决方案 ...
- Hadoop 2.6.0动态添加节点
文章出自:http://my.oschina.net/leoleong/blog/477508 本文主要从基础准备,添加DataNode和添加NodeManager三个部分详细说明在Hadoop2.6 ...
- jQuery如何获取动态添加的元素
1. 使用 on()方法 本质上使用了事件委派,将事件委派在父元素身上 自 jQuery 版本 1.7 起,on() 方法是 bind().live() 和 delegate() ...
- jquery监听动态添加的input的change事件
使用下面方法在监听普通的input的change事件正常 $('#pp').on('change', 'input.videos_poster_input', function () { consol ...
- [转] JQuery UI Tabs 动态添加页签,并跳转到新页签
[From] https://blog.csdn.net/zhangfeng2124/article/details/76672403 需求: 1.tabs默认只有一个页签,但是需要点击某按钮,动态添 ...
- 创建B树,动态添加节点,并使用三种遍历算法对树进行遍历
ks17:algorithm apple$ cat btree_test.c ///********************************************************** ...
- 给div中动态添加节点并设置样式
前端IOS今天需要动态的在图片前面添加一个按钮 主要是在使用 bt.setAttribute("class","aaa"); 可以对创建的节点使用setAttr ...
随机推荐
- 读书笔记 effctive c++ Item 52 如果你实现了placement new,你也要实现placement delete
1. 调用普通版本的operator new抛出异常会发生什么? Placement new和placement delete不是C++动物园中最常遇到的猛兽,所以你不用担心你对它们不熟悉.当你像下面 ...
- C#网络程序设计(3)网络传输编程之TCP编程
网络传输编程指基于各种网络协议进行编程,包括TCP编程,UDP编程,P2P编程.本节介绍TCP编程. (1)TCP简介: TCP是TCP/IP体系中最重要的传输层协议,它提供全双工和可 ...
- css3常用方法以及css3选择器
最重要的 CSS3 模块包括: 选择器 框模型 背景和边框 文本效果 2D/3D 转换 动画 多列布局 用户界面 CSS3 边框 CSS3 边框 通过 CSS3,您能够创建圆角边框,向矩形添加 ...
- [进程管理]linux 下 进程和线程的区别(baidu 面试)
进程是程序执行时的一个实例,即它是程序已经执行到课中程度的数据结构的汇集.从内核的观点看,进程的目的就是担当分配系统资源(CPU时间.内存等)的基本单位. 线程是进程的一个执行流,是CPU调度和分派的 ...
- Omi树组件omi-tree编写指南
Omi框架能够以少量的代码声明式地编写可拖拽移动节点的树形组件. 通常树组件能够考验UI框架的健壮性,因为需要使用到UI框架的如下特性: 组件嵌套 组件传值 组件批量传值 组件依赖自身递归嵌套(nes ...
- codeforce vk cup2017
D. k-Interesting Pairs Of Integers time limit per test 2 seconds memory limit per test 256 megabytes ...
- virtualbox中实施ASM扩容实施记录
实施ASM在线扩容 1. 首先关闭集群 [root@node1 bin]# ./crsctl stop crs [root@node2 bin]# ./crsctl stop crs 关机,halt ...
- 深入浅出理解yield
索引 转载部分内容来自:http://www.jianshu.com/p/d09778f4e055 [彻底理解yield] http://blog.csdn.net/haskei/article/de ...
- CentOS7.2静默安装oracle11g
http://www.centoscn.com/image-text/config/2015/0528/5552.html http://www.linuxidc.com/Linux/2016-04/ ...
- adesk上架实施--VDC详细配置(深信服论坛转)
1.建立独享桌面资源 1.1通过https://VDCIP:4430登录控制台,VDI设置-->资源管理-->新建独享桌面资源 1.2点击新建,独享桌面资源后显示如下界面 配置完后,往 ...