外部加載的HTML文件上的按鈕將不起作用

Question

我使用AJAX加載HTML文件。每個html文件都有一個投票和投票下來按鈕。

運行這兩個按鈕的腳本位於main（index）html文件中的document.ready函數中。

當我直接將html插入主文件時，document.ready函數有效。 但是當我ajax加載html文件時，document.ready函數的內容將不會運行。

我在做什麼錯？

Answer 1

使用ajax加載的元素不會綁定到在document.ready中定義的事件，因爲在文檔準備就緒時它們不存在。

您需要使用live或on。

例如：

$('#buttonLoadedUsingAjax').live('click', function() {}); 

，或者如果你正在使用jQuery> 1.7：

$(document).on("click", "#buttonLoadedUsingAjax", function(){ }); 

Answer 2

因爲你的腳本，結合事件處理程序到您的按鈕運行存在的按鈕之前，新添加的按鈕不會有任何事件處理程序。

您可以做的是將事件處理程序附加到按鈕的父元素，然後使用事件對象的目標屬性來確定是否單擊了按鈕。這將確保動態生成的按鈕也可以工作。

如果你使用jQuery，你可以使用它的on（）方法。

Answer 3

當你用Ajax加載它們時，函數有已經運行。沒有任何事情會讓它再次運行。使用event delegation而不是將事件處理程序直接綁定到元素。