Js为Dom元素绑定事件须知
为异步加载的Dom 元素绑定事件必须在加载完成之后绑定:
$('body').load('LearnClickBinding.ashx');
$('a').click(function () {
alert('I was clicked!');
});
上面的绑定是无效的,因为异步加载需要时间,而在获取元素之前,早已执行了$('a').click();方法,所以绑定失败。
正确的做法是,等待元素加载完后再执行 $('a').click();
$('body').load('LearnClickBinding.ashx', function () {
$('a').click(function () {
alert('I was clicked!');
}); });
Js为Dom元素绑定事件只能在页面刷新之前,也就是该Dom元素重新加载之前有效。尤其是在异步加载Dom元素的时候,就有这个问题。
$('body').load('LearnClickBinding.ashx', function () {
$('a').click(function () {
alert('I was clicked!');
}); $('body').empty(); $("<a href='#'>Click Me!</a>").appendTo('body');
});
这种绑定方式也是失败的,因为绑定事件的a元素已经被empty了,后面append的a元素是没有事件的,所以点击按钮依然没有效果。
正确的绑定方法:
$('body').load('LearnClickBinding.ashx', function () {
$('a').click(function () {
alert('I was clicked!');
}); $('body').empty(); $("<a href='#'>Click Me!</a>").appendTo('body'); $('a').click(function () {
alert('I was clicked!');
});
});
Js为Dom元素绑定事件须知的更多相关文章
- Chrome插件Visual Event查看Dom元素绑定事件的利器
找这工具找了好久,统一找着了,开发人员不可多得的好东东,收藏做一下分享. 用Chrome插件Visual Event查看Dom绑定的事件 Visual Event简介 Visual Event是一个开 ...
- jquery给动态添加的dom元素绑定事件
$('input').click(function () { //处理代码 }); 这只能是对已经加载好的元素定义事件,那些后来添加插入的元素则需要另行绑定,对于页面中动态添加的元素,在页面加载完成后 ...
- 动态生成的dom元素绑定事件
要求:要绑定到父元素上$(".school_Inlists").on("click",".chose_Inbtn",function(){ ...
- 浏览器中开发人员工具快速找到dom元素绑定那些JS事件
在web开发过程中难免会遇到让程序员去修改一些js代码东西,例如js的ajax和php等语言的交互等,在这其中你不得不了解点js的事件触发,且随着js的盛行各种插件的事件让程序员眼花缭乱,所以借助一个 ...
- 一个DOM元素绑定多个事件时,先执行冒泡还是捕获
绑定在被点击元素的事件是按照代码顺序发生,其他元素通过冒泡或者捕获“感知”的事件,按照W3C的标准,先发生捕获事件,后发生冒泡事件.所有事件的顺序是:其他元素捕获阶段事件 -> 本元素代码顺序事 ...
- js进阶---12-11、jquery如何给动态创建出来的元素绑定事件
js进阶---12-11.jquery如何给动态创建出来的元素绑定事件 一.总结 一句话总结:通过事件委托的方式,通过on方法 1.on方法在事件绑定的时候,data方式带额外参数时,字符串参数和其它 ...
- js动态添加的元素绑定事件
最近做的项目要实现一个动态添加动态删除的功能,思考了一下,该怎么给动态添加的元素绑定事件.最后觉得有两种方式比较可靠,第一种是在动态添加的html代码里添加oclick事件,然后给传个唯一的参数来判断 ...
- Angular如何给动态生成的元素绑定事件
在AngularJS中,操作DOM一般在指令中完成,事件监听机制是在对于已经静态生成的dom绑定事件,而如果在指令中动态生成了DOM节点,动态生成的节点不会被JS事件监听. 举例来说: angular ...
- JS---DOM---为元素绑定事件的引入,为元素绑定多个代码,兼容代码
1. 为元素绑定事件的引入: 用src直接绑定多个,只实现最后一个(programmer2.js) <input type="button" value="按钮&q ...
随机推荐
- eclipse链接mySQL数据库常见错误
1错误: 解决: 2,用户名输入错误 解决:查看自己的正确用户名https://zhidao.baidu.com/question/248308313.html 3. 解决: 链接示例:https:/ ...
- 实现在vue中element-ui的el-dialog弹框拖拽
参考:实现在vue中element-ui的el-dialog弹框拖拽 1.在 utils 中新建 directives.js 文件 import Vue from 'vue' // v-dialogD ...
- 基于springboot实现轮询线程自动执行任务
本文使用: Timer:这是java自带的java.util.Timer类,这个类允许你调度一个java.util.TimerTask任务.使用这种方式可以让你的程序按照某一个频度执行,但不能在指定时 ...
- JVM 初始
我们刚学习java的时候,从来没有想过new一个对象后,需要我们手动去管理过他的内存空间释放,因为我们知道java有GC垃圾回收器这哥们的存在,他会帮我们处理好一切,这就好比我是皇帝,我想在哪建个行宫 ...
- 使用ssh 初始化git一个空java工程
1:进入git 目录 cd /home/git/repo/ 2:创建一个java工程名 mkdir qft-payment 3:进入工程 cd qft-payment/ 4:初始化空工程 git - ...
- MYSQL命令练习及跳过数据库密码进行密码重新设置
2.看当前所有数据库:show databases; 3.进入mysql数据库:use mysql; 4.查看mysql数据库中所有的表:show tables; 5.查看user表中的数据: ...
- SpringCloud全家桶学习之断路器---Hystrix(五)
目前我也在摸索着学习Spring Cloud,本节主要摸索的是服务熔断.服务降级.Hystrix服务监控. 一.Hystrix概述 (1)服务雪崩 服务雪崩:多个微服务之间调用的时候,假设微服务A调用 ...
- 计算机二级-C语言-程序修改题-190123记录-对整数进行取余和除以操作。
//函数fun功能:将长整型数中每一位上为偶数的数依次取出,构成一个新数放在t中.高位仍在高位,低位仍在低位. //重难点:思路:因为不是字符串,所以可以把问题变成整数的操作,采用取余和除的操作.对整 ...
- IMDB-TOP_250-爬虫
这个小学期Python大作业搞了个获取IMDB TOP 250电影全部信息的爬虫.第二次写爬虫,比在暑假集训时写的熟练多了.欢迎大家评论. ''' ************************** ...
- 「NOIP2016」蚯蚓
传送门 Luogu 解题思路 很容易想到用一个堆去维护,但是复杂度是 \(O((n+m)\log(n+m))\) 的,显然过不了 \(7e6\). 其实这题有一个性质: 先被切开的蚯蚓,得到的两条新蚯 ...