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 ...
随机推荐
- django post get
GET请求和POST请求 GET请求: 1. 浏览器请求一个页面 2. 搜索引擎检索关键字的时候 POST请求: 1. 浏览器向服务端提交数据,比如登录/注册等 判断提交方式: if request. ...
- CentOS 7 LNMP环境搭建 Zabbix3.4
概述:在CentOS 7 64位操作系统环境下搭建LNMP(Linux+Nginx+MySQL+PHP)来运行Zabbix 3.4 监控程序 预先安装: yum install -y autoconf ...
- spring boot集成mongodb的增删改查
添加依赖 <dependency> <groupId>org.springframework.boot</groupId> <artifactId>sp ...
- nyoj 1022:合纵连横(并查集删点)
题目链接 参考链接 只附代码好了 #include<bits/stdc++.h> using namespace std; ; int a[N],b[N],vis[N]; int n,m, ...
- 【HDU5306】【DTOJ2481】Gorgeous Sequence【线段树】
题目大意:给你一个序列a,你有三个操作,0: x y t将a[x,y]和t取min:1:x y求a[x,y]的最大值:2:x y求a[x,y]的sum 题解:首先很明显就是线段树裸题,那么考虑如何维护 ...
- 10.14 socket 网络编程
简单的例子 socket客户端 import socket client = socket.socket() #声明socket类型,同时生成socket连接对象 client.connect(('l ...
- MIS(管理信息系统)
MIS 管理信息系统(Management Information System,简称MIS) 是一个以人为主导,利用计算机硬件.软件.网络通信设备以及其他办公设备,进行信息的收集.传输.加工.储存. ...
- CodeForces - 1038D (线性DP)
题目:https://codeforces.com/problemset/problem/1038/D 题意:给你n个数字,每个数字可以吃左右两边的数,然后吃完后自己变成 a[i]-a[i+1]或者a ...
- python中nonlocal 的作用域
''' nonlocal关键字用来在函数或其他作用域中使用外层(非全局)变量. ''' def work(): x = 0 def new_work(): nonlocal x x=x+3 retur ...
- Bash Shell中命令行选项/参数处理
0.引言 写程序的时候经常要处理命令行参数,本文描述在Bash下的命令行处理方式. 选项与参数: 如下一个命令行: ./test.sh -f config.conf -v --prefix=/home ...