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 ...
随机推荐
- git 常用命令与上传步骤
git 上传步骤: git init 初始化Git仓库 git add . 提交你修改的文件 git status 查看项目当中的状态(红色代表的是 未add 的文件 绿色的是已 ...
- navigate连接不上Centos7+mariadb的问题
链接数据库时忽然遇到一个问题.Mac Navicat链接时报错Can’t connect to MySQL server on ‘xx.xx.xx.xx’ (61). PS. win版Navicat ...
- rpm - RPM 软件包管理器
SYNOPSIS 查询和校验软件包: rpm {-q|--query} [select-options] [query-options] rpm {-V|--verify} [select-optio ...
- STREAM Benchmark及其操作性能分析
STREAM 是业界广为流行的综合性内存带宽实际性能 测量 工具之一.随着处理器处理核心数量的增多,内存带宽对于提升整个系统性能越发重要,如果某个系统不能够足够迅速地将内存中的数据传输到处理器当中,若 ...
- centos 6.5 关闭图形界面
图形界面的关闭分为临时关闭和永久关闭,临时关闭重启系统后恢复正常,永久关闭重启系统后图形界面仍然为关闭状态. 临时关闭 init 3 永久关闭 vi /etc/inittab 修改下面一行 id:3: ...
- boost algorithm
BOost Algorithm provides algorithms that complement the algorithms from the standard library. Unlike ...
- 【8.0.0_r4】AMS架构与流程分析
AMS主要用来管理应用程序的生命周期,以及其核心组件,包括Activity,Service,Provider,Broadcast,Task等 之前整体架构如下图(O上已经废弃) 新的架构比较直接,简化 ...
- Apache Flink 为什么能够成为新一代大数据计算引擎?
众所周知,Apache Flink(以下简称 Flink)最早诞生于欧洲,2014 年由其创始团队捐赠给 Apache 基金会.如同其他诞生之初的项目,它新鲜,它开源,它适应了快速转的世界中更重视的速 ...
- 安装ThinkPHP
ThinkPHP5的环境要求如下: PHP >= 5.4.0 PDO PHP Extension MBstring PHP Extension CURL PHP Extension 严格来说,T ...
- myeclipse svn重新定位 本地文件 svn 重新定位
我们在用工具myeclipse开发项目时,当资源库存储空间不够时,我们就需要添加资源库,涉及到我们切换项目资源库,下面就介绍一下svn资源库重新定位步骤 1,window到show view到othe ...