为了账号安全,请及时绑定邮箱和手机立即绑定

js无法捕捉dom中由ajax动态加载的html元素

标签:
JavaScript

使用了jquery库

具体的html 这边就不展示了,大概做一个范例介绍

html 文件内容:

<script type="text/javascript" class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="path/to/jquery.js"></script>

<div id="tid">

<a href="#" class="del">Delete</a>

</div>

<script>

$(function(){

$('#tid a.del').click(function(){

alert('fk');// 弹出提示信息

$('#tid').html('<a href="#" class="del">New Delete</a>');//这边就不用ajax了,直接动态修改 div#tid 下的html

return false;

});

});

</script>

保存并执行如上代码,会发现,点击Delete 之后,Div内容确实更新了,但是点击 New Delete时 没有弹出 fk 提示信息,说明更新原dom后,新加入的html不受原页面的js控制

对于我这样的菜鸟来说,是一个很棘手的问题。最蛋疼的是,你必须解决它,至于涉及到的用途这边就不废话了。

初步思路,直接写成js 静态方法 包含 到动态加载的html中。。。。这样做似乎页面源码会显得很乱,也很不方便维护,所以就没有尝试,这边也就无法提供修改后的示例代码了。

思路二,jQuery就没有集成相关的方法么?于是菜弟只能向谷哥度娘求助了,大肆搜罗一番(ps:这个搜索关键词还真不好描述),很多内容情况都不太一样,最终在stackflow上发现了 jQuery.live()的踪迹,测试一番 可行,修改后的js如下:

$(function(){

$('#tid a.del').live('click',function(){

alert('fk');// 弹出提示信息

$('#tid').html('<a href="#" class="del">New Delete</a>');//这边就不用ajax了,直接动态修改 div#tid 下的html

return false;

});

});

至于这其中的来龙去脉,就不误导大家了,有需要的可以参考jQuery的相关手册。

(ps:同事的UI用的是jquery1.7.2版)顺便测了一下新版本的jQuery v1.10.2,结果firebug直接报错 ...live(... is not a function ,看来是新版本的jquery重构了相关方法,再搜索

发现自jquery 1.9开始 live方法就被移除了,但是我们可以用on方法替代,需要注意的是这两个方法不太一样,需要进行些小改动,重新改写后的js如下:

$(function(){

$('#tid').on('click','a.del',function(){

alert('fk');// 弹出提示信息

$('#tid').html('<a href="#" class="del">New Delete</a>');//这边就不用ajax了,直接动态修改 div#tid 下的html

return false;

});

});

这边是jquery官方的一些说明(http://jquery.com/upgrade-guide/1.9/#live-removed)

$("a.foo").live("click", fn), for example, you can write$(document).on("click", "a.foo", fn)

on相关的具体使用方法请参见说明手册

好了,就记到这边 :)

点击查看更多内容
TA 点赞

若觉得本文不错,就分享一下吧!

评论

作者其他优质文章

正在加载中
  • 推荐
  • 评论
  • 收藏
  • 共同学习,写下你的评论
感谢您的支持,我会继续努力的~
扫码打赏,你说多少就多少
赞赏金额会直接到老师账户
支付方式
打开微信扫一扫,即可进行扫码打赏哦
今天注册有机会得

100积分直接送

付费专栏免费学

大额优惠券免费领

立即参与 放弃机会
意见反馈 帮助中心 APP下载
官方微信

举报

0/150
提交
取消