十年网站开发经验 + 多家企业客户 + 靠谱的建站团队
量身定制 + 运营维护+专业推广+无忧售后,网站问题一站解决
这篇文章主要介绍了js无法捕捉dom中由ajax动态加载的html元素怎么办,具有一定借鉴价值,感兴趣的朋友可以参考下,希望大家阅读完这篇文章之后大有收获,下面让小编带着大家一起了解一下。
创新互联建站坚持“要么做到,要么别承诺”的工作理念,服务领域包括:成都网站设计、成都网站制作、企业官网、英文网站、手机端网站、网站推广等服务,满足客户于互联网时代的临高网站设计、移动媒体设计的需求,帮助企业找到有效的互联网解决方案。努力成为您成熟可靠的网络建设合作伙伴!
使用了jquery库
具体的html 这边就不展示了,大概做一个范例介绍
html 文件内容:
$(function(){
$('#tid a.del').click(function(){
alert('fk');// 弹出提示信息
$('#tid').html('New Delete');//这边就不用ajax了,直接动态修改 div#tid 下的html
return false;
});
});
保存并执行如上代码,会发现,点击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('New Delete');//这边就不用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('New Delete');//这边就不用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)
感谢你能够认真阅读完这篇文章,希望小编分享的“js无法捕捉dom中由ajax动态加载的html元素怎么办”这篇文章对大家有帮助,同时也希望大家多多支持创新互联,关注创新互联行业资讯频道,更多相关知识等着你来学习!