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并不需要在绑定事件的节点内,一样可以触发成功

时间: 2024-10-25 19:57:20

JS异步加载,JQ事件不被执行解决方法的相关文章

JS 页面加载触发事件 document.ready和onload的区别

JS 页面加载触发事件 document.ready和onload的区别 document.ready和onload的区别——JavaScript文档加载完成事件 页面加载完成有两种事件: 一是ready,表示文档结构已经加载完成(不包含图片等非文字媒体文件): 二是onload,指示页面包含图片等文件在内的所有元素都加载完成. 1.Dom Ready 用jQ的人很多人都是这么开始写脚本的: $(function(){       // do something }); 例如: $(functi

JS异步加载的三种方式

js加载的缺点:加载工具方法没必要阻塞文档,过得js加载会影响页面效率,一旦网速不好,那么整个网站将等待js加载而不进行后续渲染等工作. 有些工具方法需要按需加载,用到再加载,不用不加载,. 默认正常模式下下,JS是同步加载的,即优先记载JS,只有当JS文件下载完,dom和css才开始加载,当某些事后我们需要JS异步加载,我们可以通过以下方式来设置异步加载,不同情况下选取不同方式即可 1.defer:defer JS异步下载,dom结构解析完(标签 + 样式(内容不一定下载完))才异步执行 仅I

页面优化——js异步加载

同步加载 在介绍js异步加载之前,我们先来看看什么是js同步加载.我们平时最常使用的就是这种同步加载形式: <script src="http://XXX.com/script.js"></script> 同步模式,又称阻塞模式,会阻止浏览器的后续处理,停止了后续的解析,因此停止了后续的文件加载(如图像).渲染.代码执行.一般的script标签(不带async等属性)加载时会阻塞浏览器,也就是说,浏览器在下载或执行该js代码块时,后面的标签不会被解析,例如在he

点评js异步加载的4种方式

主要介绍了点评js异步加载的4种方式,帮助大家更全面的了解js异步加载方式,感兴趣的小伙伴们可以参考一下 js异步加载的4种方式,点评开始. <!DOCTYPE html> <html> <head> <script src="http://common.cnblogs.com/script/jquery.js" type="text/javascript"></script> <script typ

一个小例子理解js异步加载

前几天笔试某公司有这样一道题.编写一个javascript函数,可以在页面上异步加载js,在加载结束后执行callback,并在IE和chrome下可以执行. 就这个题我写了一个DOM方法异步加载js的例子,可以给对于异步不了解的朋友参考感受一下. 众所周知,js是一种单线程的语言,它的Event Loop机制可以看一下阮一峰的这篇博客,讲解的很好 http://www.ruanyifeng.com/blog/2014/10/event-loop.html 下面看一下我写的例子 1 <!DOCT

PHP 开启了扩展却还是无法加载oci8 扩展的原因和解决方法

开启了PHP 的oci8 扩展,但是打印 var_dump ( get_loaded_extensions() )还是没有出现oci8 ,pdo_oci,pdo_odbc扩展. 之后去oracle官网下载 ,解压缩,之后修改系统的环境变量,还是无法使用. 最后的解决方法,安装  OracleDatabaseInstantClient11g11.2.0.3.0 x64 ,安装之后就可以正常. OracleDatabaseInstantClient11g11.2.0.3.0 x64 是CSDN某为大

现代浏览器JS异步加载方案

好,不说废话,要凌晨了我快点写完,关于JS加载阻塞之类的不做科普,本文也不讨论IE9以下的浏览器. headjs:"异步.并行加载并按你的顺序执行",这个是最符合广大码农需求的,只是它越来越臃肿,连CSS Respone什么的都加进去了,没必要那么复杂 Loadjs:今天刚刚出现在OSC首页本人疯狂测试后发现,如果需要并行加载就是乱序的(哪个JS先下载完就先执行谁),如果要顺序下载就不能并发,经测试是下载一个执行一个,每个JS文件之间有10ms的空隙(JS下载和加载时所有渲染操作都要暂

JS 页面加载触发事件 document.ready和window.onload的区别

document.ready和onload的区别——JavaScript文档加载完成事件页面加载完成有两种事件: 一是ready,表示文档结构已经加载完成(不包含图片等非文字媒体文件): 二是onload,指示页面包含图片等文件在内的所有元素都加载完成. 1.Dom Ready 使用jq时一般都是这么开始写脚本的: $(function(){ // do something }); 例如: $(function() { $("a").click(function() { alert(&

js异步加载

加载顺序是怎样的? 动态的和静态的都加载完之后才执行ready 还是只有静态的加载完之后就执行了? 页面加载完成之后是指什么才是完全加载完? 什么是并行,什么是异步 脚本的加载应该与文档的加载同时进行,并且不影响DOM的渲染. 文档加载?DOM加载 async属性是HTML5新增的.作用和defer类似,即允许在下载脚本的同时进行DOM的渲染.但是它将在下载后尽快执行(即JS引擎空闲了立马执行),不能保证脚本会按顺序执行.它们将在onload 事件之前完成. 异步加载的三种方式 http://w