为异步加载的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元素绑定事件须知的更多相关文章

  1. Chrome插件Visual Event查看Dom元素绑定事件的利器

    找这工具找了好久,统一找着了,开发人员不可多得的好东东,收藏做一下分享. 用Chrome插件Visual Event查看Dom绑定的事件 Visual Event简介 Visual Event是一个开 ...

  2. jquery给动态添加的dom元素绑定事件

    $('input').click(function () { //处理代码 }); 这只能是对已经加载好的元素定义事件,那些后来添加插入的元素则需要另行绑定,对于页面中动态添加的元素,在页面加载完成后 ...

  3. 动态生成的dom元素绑定事件

    要求:要绑定到父元素上$(".school_Inlists").on("click",".chose_Inbtn",function(){ ...

  4. 浏览器中开发人员工具快速找到dom元素绑定那些JS事件

    在web开发过程中难免会遇到让程序员去修改一些js代码东西,例如js的ajax和php等语言的交互等,在这其中你不得不了解点js的事件触发,且随着js的盛行各种插件的事件让程序员眼花缭乱,所以借助一个 ...

  5. 一个DOM元素绑定多个事件时,先执行冒泡还是捕获

    绑定在被点击元素的事件是按照代码顺序发生,其他元素通过冒泡或者捕获“感知”的事件,按照W3C的标准,先发生捕获事件,后发生冒泡事件.所有事件的顺序是:其他元素捕获阶段事件 -> 本元素代码顺序事 ...

  6. js进阶---12-11、jquery如何给动态创建出来的元素绑定事件

    js进阶---12-11.jquery如何给动态创建出来的元素绑定事件 一.总结 一句话总结:通过事件委托的方式,通过on方法 1.on方法在事件绑定的时候,data方式带额外参数时,字符串参数和其它 ...

  7. js动态添加的元素绑定事件

    最近做的项目要实现一个动态添加动态删除的功能,思考了一下,该怎么给动态添加的元素绑定事件.最后觉得有两种方式比较可靠,第一种是在动态添加的html代码里添加oclick事件,然后给传个唯一的参数来判断 ...

  8. Angular如何给动态生成的元素绑定事件

    在AngularJS中,操作DOM一般在指令中完成,事件监听机制是在对于已经静态生成的dom绑定事件,而如果在指令中动态生成了DOM节点,动态生成的节点不会被JS事件监听. 举例来说: angular ...

  9. JS---DOM---为元素绑定事件的引入,为元素绑定多个代码,兼容代码

    1. 为元素绑定事件的引入: 用src直接绑定多个,只实现最后一个(programmer2.js) <input type="button" value="按钮&q ...

随机推荐

  1. .NET Core采用的全新配置系统[8]: 如何实现配置与源文件的同步

    配置的同步涉及到两个方面:第一,对原始的配置文件实施监控并在其发生变化之后从新加载配置:第二,配置重新加载之后及时通知应用程序进而使后者能够使用最新的配置.接下来我们利用一个简单的.NET Core控 ...

  2. PYTHON isinstance语法

    def obj_len(arg): #isinstance(),判断是否是某一类 if isinstance(arg,str) or (isinstance(arg,list)) or (isinst ...

  3. Generic Netlink详解

    netlink socket是一种用于用户态进程和内核态进程之间的通信机制.它通过为内核模块提供一组特殊的API,并为用户程序提供了一组标准的socket接口的方式,实现了全双工的通讯连接. Netl ...

  4. ZOJ Problem Set - 3861 Valid Pattern Lock(dfs)

    http://acm.zju.edu.cn/onlinejudge/showProblem.do?problemCode=3861 这道题当时没做出来,后来经过队友提醒才做出来. 3*3的九宫格,给你 ...

  5. oracle ebs 12.20 安装成功其过程失败日记及总结(1)

    由于公司业务须要,须要安装oracle ebs进行 form 开发,所以就開始了痛苦oracle ebs安装之过程.刚開始是在vm中win2003 server 中安装ebs,,不知是我自已的水平太差 ...

  6. 微信小程序开发小结

    1.点击按钮分享功能: 使用Button组件,设置open-type="share",然后在js文件的onShareAppMessage方法中设置如下: onShareAppMes ...

  7. PythonStudy——函数的参数 Function argument

    形参与实参 # 参数介绍:# 函数为什么要有参数:因为内部的函数体需要外部的数据# 怎么定义函数的参数:在定义函数阶段,函数名后面()中来定义函数的参数# 怎么使用函数的参数:在函数体中用定义的参数名 ...

  8. 功率因数cosφ仪表盘

    一.截图 二.说明 本篇博客主要是有三个亮点: ① 刻度标注在仪表盘标线外 ② 仪表盘存在两个刻度值,分别是(正)0.5~1 和(负)-1~-0.5 ③ 仪表盘内标注,分别是“超前”和“滞后” 三.代 ...

  9. Linux下网卡绑定模式

    Linux bonding驱动一共提供了7种模式,它们分别是:balance-rr .active-backup.balance-xor.broadcast.802.3ad.balance-tlb.b ...

  10. 多目标遗传算法 ------ NSGA-II (部分源码解析) 实数、二进制编码的变异操作 mutation.c

    遗传算法的变异操作 /* Mutation routines */ # include <stdio.h> # include <stdlib.h> # include < ...