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元素怎么辦”這篇文章對大家有幫助，同時也希望大家多多支持億速云，關注億速云行業資訊頻道，更多相關知識等著你來學習!