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 ...
随机推荐
- 【R】正态检验与R语言
正态检验与R语言 1.Kolmogorov–Smirnov test 统计学里, Kolmogorov–Smirnov 检验(亦称:K–S 检验)是用来检验数据是否符合某种分布的一种非参数检验,通过比 ...
- html基础认识,高手别看
HTML5是一种用于在万维网上构建和呈现内容的符号言语.它是HTML规范的第五和当时版别.它是由万维网联盟(W3C)在十月发布的2014 [ 2 ] [ 4 ]和最新的多媒体支持进步言语,一起坚持它简 ...
- 转 JSON与XML转换
这两天处理模块的联调工作,在json与XML转换中出现了一些奇怪的问题,仔细究来,实为对org.json.*包知之太少.晚上baidu.google一下,找出了问题出现的原因.在模块中,使用了两个方法 ...
- oracle linux 6.5 安装 oracle 12cR2数据库(2)-DBCA建库
援引:http://www.cnblogs.com/kerrycode/p/3386917.html by 潇湘隐者 Oracle 12C引入了CDB与PDB的新特性,在ORACLE 12C数据库引 ...
- HTML5工具做屏幕自适应的两种方法
近一两年,HTML5在中国很火,也出了不少HTML5工具和模板.别的先不说,对于不同的H5工具,解决屏幕自适应问题的区别是什么? 简单来说,感应式设计是当用不同设备访问时,能够根据设备的宽度和高度对设 ...
- keydown - > keypress - > keyup 用法和区别
英文输入法: 事件触发顺序:keydown - > keypress - > keyup 中文输入法: firfox:输入触发keydown,回车确认输入触发keyup chr ...
- angular控制器之间的传值
每个controller都会有自己的scope,所有的scope都是属于 $rootScope的子或者子的子... 那么问题就好解决了,通过 $rootScope.$broadcast 广播的事件每个 ...
- chrome主页被篡改 成hao123
应该是开了个从流氓网站下的蓝灯,然后发现主页被篡改 尝试chrome设置修改无效,应该是快捷方式被改了 系统 win10 1.打开对应的下面两个地址,找到chrome的快捷方式,右键属性 C:\Use ...
- 写给Android App开发人员看的Android底层知识(3)
(七)App启动流程第2篇 书接上文,App启动一共有七个阶段,上篇文章篇幅所限,我们只看了第一阶段,接下来讲剩余的六个阶段,仍然是拿斗鱼App举例子. 简单回顾一下第一阶段的流程,就是Launche ...
- Linux 安装USB摄像头
sudo apt-get update sudo apt-get install fswebcam sudo apt-get install mplayer sudo apt-get install ...