如何將事件綁定到頁面加載後生成的HTML中？

我正在使用jquery .clone()根據用戶點擊將HTML添加到我的頁面。如何將事件綁定到頁面加載後生成的HTML中？

我想添加onclick處理程序到新創建的HTML。我知道.on()可以用來觸發未來創建的HTML上的事件，但我相信必須在創建HTML之前編寫（並執行）之前的。

在這example code，如果用戶從選擇列表中選擇「related_id」，jquery創建一個字段，用戶可以輸入id。我想在這裏添加一個ajaxy的東西，所以用戶可以輸入相關項目的名稱而不是它的id。 ajax請求將取決於用戶選擇哪個字段。

一般來說，我知道如何使用jquery創建ajax請求，但是如何將特定於字段的ajax代碼添加到新創建的HTML中？

來源

2012-07-11 Thunder Rabbit

您的標題是相當不相關的，我建議您修改它以更準確地表示您的問題。 – 2012-07-11 03:43:39

你的jsfiddle中有很多代碼，其中大部分與這個問題無關。無論如何，如果我正確地理解了你，你要求澄清的是相當高的水平。

我要做的第一件事就是確保在所有新元素中包含一個共同的class。然後，你會結合使用.on()如下Click事件：

$("#parentElement").on('click','.newClass', function() { 
    var me = $(this).text(); //gets the specific text from each .newClass element when clicked 
    doAjaxRequest(me); 
}

注#parentElement必須在DOM存在，則創建了這個點擊處理程序之前。

你doAjaxRequest功能將沿着以下線的東西：

function doAjaxRequest(elemText) { 
    $.ajax({ 
     ... 
     data: elemText, 
     ... 
    }); 
}

注.on()可以以此爲jQuery的1.7。對於舊版本，請參閱以下options：

$(selector).live(events, data, handler);    // jQuery 1.3+ 
$(document).delegate(selector, events, data, handler); // jQuery 1.4.3+ 
$(document).on(events, selector, data, handler);  // jQuery 1.7+

對於1.4.4版。代碼如下：

$("#parentElement").delegate('.newClass', 'click', function() { 
    var me = $(this).text(); //gets the specific text from each .newClass element when clicked 
    doAjaxRequest(me); 
}

來源

2012-07-11 04:02:53 nbrooks

我假設你想單擊元素時發出ajax請求。如果我誤解了你，請告訴我。 – nbrooks 2012-07-11 04:03:45

根據對另一個答案的評論進行更新+1。 – ahren 2012-07-11 04:19:17

感謝您的更新;你做出了更好的答案..值得兩個綠色檢查！ – 2012-07-11 04:27:09

您可以插入<script type='text/javascript'> ... your jquery code here </script>標記以及HTML的其餘部分。

來源

2012-07-11 03:41:09

根據選擇哪個項目，查詢將會（稍微）不同。 – 2012-07-11 03:45:50

有一個解決方法。如果使用特定的ID創建它，腳本中的代碼也可以引用該ID。追加類似'「」'。 – 2012-07-11 04:04:42

爲什麼在將它添加到文檔之前，您只需將處理程序綁定到$clone？

$clone.on("change", function(){ 
    //Do my AJAX 
});

來源

2012-07-11 03:43:08 ahren

hmmm ...在「做我的AJAX」部分，我需要根據選擇的內容編寫ajax;我會嘗試一下，看看它是否會起作用。 – 2012-07-11 03:47:42

控制檯不斷報告.on不是函數，但bind（）正常工作。 – 2012-07-11 04:06:04

你必須有一個版本的jQuery <1.7 - 'bind（）'是好的。 – ahren 2012-07-11 04:09:31

如何將事件綁定到頁面加載後生成的HTML中？

回答

相關問題