使用live delegate on来解决js对后加载的html失效的问题
来源:互联网 发布:淘宝上的进口零食推荐 编辑:程序博客网 时间:2024/06/05 06:18
今天要写一个前端的东西。每多学一点知识,就可以少写几行代码、几十行代码、几个文件量的代码……这是真的。一直对前端的研究都是停留在遇到问题百度谷歌答案的做法。今天遇到这样一个问题:已经写好的js代码,对ajax加载的html失效了。
用好几组关键字都没有找到答案,最后这组帮我找到了解答的办法:
很幸运,我来到了:http://stackoverflow.com/questions/10161938/jquery-function-not-working-on-ajax-loaded-content
将原来写的
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
$('#containerElement').on('click', 'a.myClass', function() { ... });
看来on是更好的解决方案。于是我最后的代码改为:
找个时间研究一下:live VS delegate VS on。希望本文帮到部分遇到与我同样问题的朋友。
用好几组关键字都没有找到答案,最后这组帮我找到了解答的办法:
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).
将原来写的
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。希望本文帮到部分遇到与我同样问题的朋友。
5 0
- 使用live delegate on来解决js对后加载的html失效的问题
- 使用live delegate on来解决js对后加载的html失效的问题
- 使用.live()可以解决动态加载html,但js无效果的问题
- 解决 UIWebView 加载 html 时 js 加载不了的问题
- AJAX加载后js失效问题及ASP.NET中UpdatePanel内控件的JS失效的问题
- 对jquery中on,bind,delegate,live添加事件的总结
- $.load加载动态页面ie失效,js失效的问题
- jquery的load()方法加载html后javascript失效解决方法
- JQuery 1.7.2 API中bind(),on(),live()和delegate()方法的使用
- JQuery中事件one、bind、unbind、live、delegate、on、off、trigger、triggerHandler的各种使用区别
- 对delegate的使用
- jquery的事件委托-bind,live,delegate,on的区别
- jQuery的事件处理方法介绍 - bind(),live(),delegate(),on()
- jQuery的事件处理方法介绍 - bind(),live(),delegate(),on()
- JQuery五:jQuery中.bind() .live() .delegate() .on()的区别
- jQuery绑定方法的区别 - .bind() / .live() / .delegate() / .on()
- jquery中bind,live,delegate和on的区别
- jQuery中.bind() .live() .delegate() .on()的区别
- linux+mysql+tomcat+jdk
- mysql帮助的使用
- 设计模式---工厂模式
- Unity3D开发:为地形添加水源和效果
- UVA 548 Tree(数据结构,二叉树,遍历)
- 使用live delegate on来解决js对后加载的html失效的问题
- Adding a library/JAR to an Eclipse Android project
- jquery ajax 在submit按钮的click处理中应注意的地方
- 怎样跟他人建立好人际关系
- 关于IIS发布应用的几点总结
- HTML5 localStorage and sessionStorage
- 配置mac 环境时碰到的一些问题
- 【Unknown】HttpClient:一个HTTP库规范
- 动态链接库(DLL)的编写及导出函数