JS异步加载,JQ事件不被执行解决方法
一,在我们实现动态生成HTML代码时会出现,使用JQ方法会不被执行,解决方法,如下:使用jquery的委托事件,将该方法委托到页面已经存在的一个节点上
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title></title>
<script src="jquery-1.11.1.js"></script>
<script>
$(function () {
$("#demo").delegate('.t1', 'click', function () {
alert("t1");
});
$("#demo").delegate('#t2', 'click', function () {
alert("t2");
});
$("#demo").delegate('.t3', 'click', function () {
alert("t3");
});
$("#demo").delegate('#t4', 'click', function () {
alert("t4");
});
Test();
});
function Test() {
var strHtml = "<div class='t1'>t1</div>";
strHtml += "<div id='t2'>t2</div>";
strHtml += "<div class='t3'>t3</div>";
strHtml += "<div id='t4'>t4</div>";
$("#demo").html(strHtml);
}
</script>
</head>
<body>
<div id="demo">
</div>
<div id="demo1">
</div>
</body>
</html>
二,经过以上测试,得出
1》使用class和id触发的写法是一样的
2》JS动态添加的HTML并不需要在绑定事件的节点内,一样可以触发成功
JS异步加载,JQ事件不被执行解决方法的更多相关文章
- JS异步加载的三种方式
js加载的缺点:加载工具方法没必要阻塞文档,过得js加载会影响页面效率,一旦网速不好,那么整个网站将等待js加载而不进行后续渲染等工作. 有些工具方法需要按需加载,用到再加载,不用不加载,. 默认正常 ...
- 关于JS异步加载方案
javascript延迟加载的解决方案: 1.使用defer标签 <span style="font-size: small;"><script type=&qu ...
- 转:web前端面试题合集 (Javascript相关)(js异步加载详解)
1. HTTP协议的状态消息都有哪些? 1**:请求收到,继续处理2**:操作成功收到,分析.接受3**:完成此请求必须进一步处理4**:请求包含一个错误语法或不能完成5**:服务器执行一个完全有效请 ...
- JS异步加载的三种方案
js加载的缺点:加载工具方法没必要阻塞文档,个别js加载会影响页面效率,一旦网速不好,那么整个网站将等待js加载而不进行后续渲染等工作. 有些工具方法需要按需加载,用到再加载,不用不加载. 一.def ...
- 点评js异步加载的4种方式
主要介绍了点评js异步加载的4种方式,帮助大家更全面的了解js异步加载方式,感兴趣的小伙伴们可以参考一下 js异步加载的4种方式,点评开始. <!DOCTYPE html> <htm ...
- 关于使用Iscroll.js异步加载数据后不能滑动到最底端的问题解决方案
关于使用Iscroll.js异步加载数据后不能滑动到最底端,拉到最下边又弹回去的问题困扰了我老半天,相信很多朋友都遇到了.我刚好不小心解决了,和大家分享一下.由于各种忙,下边就直接上代码吧. (前提是 ...
- js 异步加载的方式
js 异步加载的方式 渲染引擎遇到 script 标签会停下来,等到执行完脚本,继续向下渲染 defer 是“渲染完再执行”,async 是“下载完就执行”,defer 如果有多个脚本,会按照在页面中 ...
- JS 页面加载触发事件 document.ready和window.onload的区别
document.ready和onload的区别——JavaScript文档加载完成事件页面加载完成有两种事件: 一是ready,表示文档结构已经加载完成(不包含图片等非文字媒体文件): 二是onlo ...
- JS 页面加载触发事件 document.ready和onload的区别(转)
原博地址:http://blog.163.com/zhaoyanping_1125/blog/static/20132915320111129113723710/ * document.ready和o ...
随机推荐
- 三、SQL Server 对JSON的支持
一.SQL Server 对JSON的支持 一.实现效果 现在 我用数据库是sql2008 ,共计2万数据. 每一条数据里面的有一个为attribute字段是 json存储状态属性, 我怎么查看 ...
- HDU4089/Uva1498 Activation 概率DP(好题)
题意:Tomato要在服务器上激活一个游戏,一开始服务器序列中有N个人,他排在第M位,每次服务器会对序列中第一位的玩家进行激活,有四种结果: 1.有p1的概率会激活失败,这时候序列的状态是不变的.2. ...
- MetaException(message:For direct MetaStore DB connections, we don't support retries at the client level.)
在mysql中执行以下命令: drop database hive; create database hive; alter database hive character set latin1 ...
- [BZOJ3653]谈笑风生 主席树
题面 这道题应该比较裸吧. \(a\),\(b\)都是\(c\)的祖先. 那么第一种情况是\(b\)是\(a\)的祖先,那么方案数就是\(\min\{dep[a]-1,k\}\cdot (num[a] ...
- ubuntu 开启ftp服务
一. 检查是否已安装 vsftpd vsftpd -v 二. 安装 vsftpd apt-get install vsftpd 三. 检查是否已安装好 vsftpd vsftpd -v system ...
- Hadoop的基础命令
首次使用Hadoop时,格式化文件系统命令:hdfs namenode -format 启动HDFS:start-dfs.sh 启动YARN:start-all.sh start-all.sh等价于s ...
- 【Dart学习】--之Runes与Symbols相关方法总结
一,Runes 在Dart中,Runes代表字符串的UTF-32字符集, 另一种Strings Unicode为每一个字符.标点符号.表情符号等都定义了 一个唯一的数值 由于Dart字符串是UTF-1 ...
- angularjs的select使用及默认选中
1 ng-model="standardCourse.showHours"代替name 2 ng-selected = "1"代替selected=" ...
- 微博API的申请
https://segmentfault.com/a/1190000012548487
- php开发面试题---日常面试题1
php开发面试题---日常面试题1 一.总结 一句话总结: 实战确定学习方向,然后去网上找视频资源,非常多,然后看书 1.什么样的数据存在memcache里面? 要去数据库里面查询的那些数据,数据库查 ...