今天写一个前端的东西。每学到更多的知识。几下就能写几行代码、代码行数十个、代码几个文件量……这是真的。一直以来研究的前端遇到的问题仍然在实践百度谷歌问答。

我今天遇到这样的问题:已经写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故障问题的更多相关文章

  1. (转)先装VS后装IIS产生问题的解决办法

    原文地址:http://www.cnblogs.com/mytechblog/articles/1897682.html 基于.net的web程序设计asp.net,我们就必须安装VS和IIS,但这二 ...

  2. 解决js跨域问题

    如何解决js跨域问题 Js跨域问题是web开发人员最常碰到的一个问题之一.所谓js跨域问题,是指在一个域下的页面中通过js访问另一个不同域下 的数据对象,出于安全性考 虑,几乎所有浏览器都不允许这种跨 ...

  3. promise 的基本概念 和如何解决js中的异步编程问题 对 promis 的 then all ctch 的分析 和 await async 的理解

    * promise承诺 * 解决js中异步编程的问题 * * 异步-同步 * 阻塞-无阻塞 * * 同步和异步的区别? 异步;同步 指的是被请求者 解析:被请求者(该事情的处理者)在处理完事情的时候的 ...

  4. 如何解决js跨域问题

    Js跨域问题是web开发人员最常碰到的一个问题之一.所谓js跨域问题,是指在一个域下的页面中通过js访问另一个不同域下的数据对象,出于安全性考 虑,几乎所有浏览器都不允许这种跨域访问,这就导致在一些a ...

  5. 学以致用:手把手教你撸一个工具库并打包发布,顺便解决JS浮点数计算精度问题

    本文讲解的是怎么实现一个工具库并打包发布到npm给大家使用.本文实现的工具是一个分数计算器,大家考虑如下情况: \[ \sqrt{(((\frac{1}{3}+3.5)*\frac{2}{9}-\fr ...

  6. 爬虫:selenium + phantomjs 解决js抓取问题(一)

    selenium模块主要用来做测试,模拟键盘.鼠标来操作浏览器. phantomjs 就像一个无界面的浏览器一样. 两个结合能很好的解决js抓取的问题. 测试代码: #coding=utf-8 fro ...

  7. 先装.net后装iis的问题

    如果没有按照正常的先装iis后装.net的顺序,可以使用此命令重新注册一下:(即就是先装的是visual stuido 2010的话,在安装IIS 7) 32位的Windows:----------- ...

  8. bower解决js的依赖管理

    bower解决js的依赖管理 前言: 一个新的web项目开始,我们总是很自然地去下载需要用到的js类库文件,比如jQuery,去官网下载名为jquery-1.10.2.min.js文件,放到我们的项目 ...

  9. 先装Net Framework 后 装 IIS的处理办法

    先装IIS话,后面装Net Framework时候会自动注册 处理aspx和ashx等的处理扩展程序 先装Net Framework 后 装 IIS.扩展程序注册在命令:aspnet_regiis - ...

随机推荐

  1. zoj - 3209 - Treasure Map(精确覆盖DLX)

    题意:一个 n x m 的矩形(1 <= n, m <= 30),现给出这个矩形中 p 个(1 <= p <= 500)子矩形的左下角与右下角坐标,问最少用多少个子矩形能够恰好 ...

  2. Git双机同步

    如果使用git init 初始化,当客户端仓库push内容时,服务器端仓库可以看到log,但是更新的文件不能显示,必须使用git reset --hard才能更新内容

  3. 八月份 CUGBACM_Summer_Tranning 题解

    CUGBACM_Summer_Tranning4 比赛链接:http://vjudge.net/contest/view.action?cid=52230#overview 题解链接: F . HDU ...

  4. windows phone 独立存储空间的操作 (2)

    原文:windows phone 独立存储空间的操作 (2) IsolatedStorage独立存储空间是保存应用程序的一些数据已经配置文件,独立存储空间相对于其他的wp程序是独立的,也就是说每个wp ...

  5. 0当执行游戏xc000007b错误的解决方法

    如图所示,这个错误是让很多玩家担心. 出现这个错误,可能是硬件的问题,也可能是软件的问题. 可是.因为硬件引起该问题的概率非常小,而且除了更换硬件之外没有更好的解决方法,因此本文将具体介绍怎样通过软件 ...

  6. java reflect反思总结

    --------------TestBean package lh.demo.bean; public class TestBean {  private String userName;  priv ...

  7. VS2012的变态优化,双循环变单循环

    VS2010也是一样

  8. JAVA IP地址转成长整型方法

    JAVA IP地址转成长整型方法 代码例如以下: /** * IP转成整型 * @param ip * @return */ public static Long ip2int(String ip) ...

  9. POJ 1236 Network of Schools(强连通分量)

    POJ 1236 Network of Schools 题目链接 题意:题意本质上就是,给定一个有向图,问两个问题 1.从哪几个顶点出发,能走全全部点 2.最少连几条边,使得图强连通 思路: #inc ...

  10. oracle 12c 三学习 pdb 可插拔测试

    DECLARE l_result BOOLEAN; BEGIN l_result := DBMS_PDB.check_plug_compatibility( pdb_descr_file => ...