使用live delegate on解决js后装html故障问题
今天写一个前端的东西。每学到更多的知识。几下就能写几行代码、代码行数十个、代码几个文件量……这是真的。一直以来研究的前端遇到的问题仍然在实践百度谷歌问答。
我今天遇到这样的问题:已经写js代码,正确ajax加载html不灵。
随着几组keyword,最后这组帮我找到了解答的办法:
javascript not work on ajax content
非常幸运,我来到了:http://stackoverflow.com/questions/10161938/jquery-function-not-working-on-ajax-loaded-content
有经验的人回答了:
When you initially created the .click() handler, that second button was not yet in the DOM, so jQuery could not attach an event handler to it. The .live() function will work for any element that is already
in the DOM and also any element that will be added in the future (e.g. from an ajax call).
就是说。live能够将事件绑定到已经载入或没有载入的DOM里。
将原来写的
jQuery('.ajaxCommentMiniList a').click(function(){
alert(123);
return false;
});
改成:
jQuery('.ajaxCommentMiniList a').live('click', function(){
alert(123);
return false;
});
就可以。
网上不少文章建议使用delegate而不是live,甚至还有on。
http://stackoverflow.com/questions/4579117/jquery-live-vs-delegate
This, however, seems to me to be much more explicit about what is actually happening. You don't realise from the live example that the events are actually being captured on document; with delegate,
it is clear that the event capturing happens on #containerElement. You can do the same thing with live, but the syntax becomes increasingly horrid.
Specifying a context for your events to be captured also improves performance. With the live example, every single click on the entire document has to be compared with the selector a.myClass to see if it matches. With delegate, that is only the elements within
#containerElement. This will obviously improve performance.
Finally, live requires that your browser looks for a.myClass whether or not it currently exists. delegate only looks for the elements when the events are triggered, giving a further performance advantage.
NB delegate uses live behind the scenes, so you can do anything with live that you can do with delegate. My answer deals with them as they are commonly used.
Note also that neither live nor delegate is the best way to do event delegation in modern jQuery. The new syntax (as of jQuery 1.7) is with the on function. The syntax is as follows:
$('#containerElement').on('click', 'a.myClass', function() { ... });
看来on是更好的解决方式。于是我最后的代码改为:
jQuery('.ajaxCommentMiniList').on('click', '.pagination a',function(){
ajaxCommentMiniList.clickAction(jQuery(this));
return false;
});
找个时间研究一下:live VS delegate VS on。我希望这帮助部分遇到了同样的问题,我的朋友。
版权声明:本文博客原创文章,博客,未经同意,不得转载。
使用live delegate on解决js后装html故障问题的更多相关文章
- (转)先装VS后装IIS产生问题的解决办法
原文地址:http://www.cnblogs.com/mytechblog/articles/1897682.html 基于.net的web程序设计asp.net,我们就必须安装VS和IIS,但这二 ...
- 解决js跨域问题
如何解决js跨域问题 Js跨域问题是web开发人员最常碰到的一个问题之一.所谓js跨域问题,是指在一个域下的页面中通过js访问另一个不同域下 的数据对象,出于安全性考 虑,几乎所有浏览器都不允许这种跨 ...
- promise 的基本概念 和如何解决js中的异步编程问题 对 promis 的 then all ctch 的分析 和 await async 的理解
* promise承诺 * 解决js中异步编程的问题 * * 异步-同步 * 阻塞-无阻塞 * * 同步和异步的区别? 异步;同步 指的是被请求者 解析:被请求者(该事情的处理者)在处理完事情的时候的 ...
- 如何解决js跨域问题
Js跨域问题是web开发人员最常碰到的一个问题之一.所谓js跨域问题,是指在一个域下的页面中通过js访问另一个不同域下的数据对象,出于安全性考 虑,几乎所有浏览器都不允许这种跨域访问,这就导致在一些a ...
- 学以致用:手把手教你撸一个工具库并打包发布,顺便解决JS浮点数计算精度问题
本文讲解的是怎么实现一个工具库并打包发布到npm给大家使用.本文实现的工具是一个分数计算器,大家考虑如下情况: \[ \sqrt{(((\frac{1}{3}+3.5)*\frac{2}{9}-\fr ...
- 爬虫:selenium + phantomjs 解决js抓取问题(一)
selenium模块主要用来做测试,模拟键盘.鼠标来操作浏览器. phantomjs 就像一个无界面的浏览器一样. 两个结合能很好的解决js抓取的问题. 测试代码: #coding=utf-8 fro ...
- 先装.net后装iis的问题
如果没有按照正常的先装iis后装.net的顺序,可以使用此命令重新注册一下:(即就是先装的是visual stuido 2010的话,在安装IIS 7) 32位的Windows:----------- ...
- bower解决js的依赖管理
bower解决js的依赖管理 前言: 一个新的web项目开始,我们总是很自然地去下载需要用到的js类库文件,比如jQuery,去官网下载名为jquery-1.10.2.min.js文件,放到我们的项目 ...
- 先装Net Framework 后 装 IIS的处理办法
先装IIS话,后面装Net Framework时候会自动注册 处理aspx和ashx等的处理扩展程序 先装Net Framework 后 装 IIS.扩展程序注册在命令:aspnet_regiis - ...
随机推荐
- 理解Git的工作流程(转)
英文原文:Understanding the Git Workflow 如果你不理解Git的设计动机,那你就会处处碰壁.知道足够多的命令和参数后,你就会强行让Git按你想的来工作,而不是按Git自己的 ...
- 动态加载资源文件(ResourceDictionary)
原文:动态加载资源文件(ResourceDictionary) 在xaml中控件通过绑定静态资源StaticResource来获取样式Style有多种方式: 1.在项目的启动文件App中<App ...
- windows phone 三种数据共享的方式(8)
原文:windows phone 三种数据共享的方式(8) 本节实现的内容是数据共享,实现的效果描述:首先是建立两个页面,当页面MainPage通过事件导航到页面SecondPage是,我们需要将Ma ...
- Android编程心得-Service数据绑定初步
在Android里,Service的数据绑定是一种重要的用法,我们知道Service与Activity一样是运行在当前应用进程的主线程里面的,他们之间交互的方式有多种,下面我来介绍一下如何使用数据绑定 ...
- HDU 3177 Crixalis's Equipment(贪婪)
主题链接:http://acm.hdu.edu.cn/showproblem.php? pid=3177 Problem Description Crixalis - Sand King used t ...
- poj 2369 Permutations 更换水称号
寻找循环节求lcm够了,如果答案是12345应该输出1.这是下一个洞. #include<iostream> #include<cstdio> #include<cstr ...
- crontab,想说爱你不easy
悲剧的背景 跑自己主动化脚本的机器连不上toastserver了, 仅仅能自己写个脚本每天跑了. 当然要放在crontab里了. 5 3 * * * sh ~/nosecron.sh 更悲剧的结果 第 ...
- 关于扩展IP地址空间的几个方案的探讨
摘 要:在IP地址紧缺的背景下,IPv6.NAPT.SuIP几种解决方案应运而生.分析.比较几种方案后,可知SuIP是最佳方案. 关键词:IPv6:NAPT:SuIP:IP地址空间扩展 The In ...
- 白学jquery Mobile《构建跨平台APP:jQuery Mobile移动应用实战》串行4(场景变化)
作为一个真正的利用价格值应用,首先,你应该至少有两页,通过切换页面来实现很多其他互动.比如手机人人网,首先,打开后进入登录页面,将有登录后,新的东西.然后拉左侧面板.你可以看到相册.私人信息.像其他应 ...
- Codeforces Round #258 (Div. 2) B. Sort the Array
题目链接:http://codeforces.com/contest/451/problem/B 思路:首先找下降段的个数,假设下降段是大于等于2的,那么就直接输出no,假设下降段的个数为1,那么就把 ...