如何將事件添加到由AJAX附加的元素？

Question

我使用AJAX加載一些HTML，這工作正常，加載一個位是我試圖攔截使用

$(document).ready(function() {  
    $('contact_form').submit(function() { 
     return false; 
    });  
}); 

以上的JavaScript加載初始頁面加載提交事件聯繫表格。

然而，當我訪問該頁面，並提交形式，它遵循其默認路徑，遵循規則提交（其作品，但它是我的，我想大多數用戶不跟隨非JavaScript兼容路線）。我曾嘗試在最初加載的頁面位和使用AJAX加載的類似位上測試.click()事件，結果是隻有最初加載頁面的元素執行.click()事件。

我猜這是事實上，我加載元素前，加載DOM（我有一些<script>標籤加載初始頁面加載）之前加載jQuery代碼，並沒有適當地傾聽聽衆（野生猜，我其實並沒有真正的線索）。

我的假設是否正確？什麼是最好的修復？

Answer 1

首先contact_form不是一個有效的選擇器，因爲它正在尋找一個<contact_form>元素。它應該是#contact_form按ID選擇，或.contact_form按類別選擇。

其次，您對事件處理程序的假設是正確的，快捷事件處理程序（click,submit等）僅適用於頁面加載時DOM中可用的元素。

如果元素被添加到頁面加載後的DOM，你需要使用delegate()或on()（在jQ1.7 +）事件添加到該元素（例如，通過AJAX）：

$('body').delegate("#contact_form", "submit", function() { 
    return false; 
)}; 

或者：

$('body').on("submit", "#contact_form", function() { 
    return false; 
)}; 

我已經使用body作爲家長選擇在這裏，但你應該用最接近的靜態元素（這是一個可在頁面加載DOM）到要放置該事件的一個。