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

这篇文章主要介绍了js无法捕捉dom中由ajax动态加载的html元素怎么办，具有一定借鉴价值，感兴趣的朋友可以参考下，希望大家阅读完这篇文章之后大有收获，下面让小编带着大家一起了解一下。

使用了jquery库

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

html 文件内容：

<script type="text/javascript" src="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)

感谢你能够认真阅读完这篇文章，希望小编分享的“js无法捕捉dom中由ajax动态加载的html元素怎么办”这篇文章对大家有帮助，同时也希望大家多多支持亿速云，关注亿速云行业资讯频道，更多相关知识等着你来学习!