jQuery在加載時不觸發（不是Ajax）

Question

首先，讓我清楚一點，我不是要在Ajax上下文中使用load（）來加載遠程資源。

我只是想將一個函數綁定到在頁面加載時不存在的對象，以便在出現時可以對其進行處理。 我正在使用jQuery 1.7

我有一個帶有class =“ contact-form”的表單。 該表單是動態創建的，因此在document.ready（）觸發時不存在。

我要做的是在創建表單時使某些事情發生。 大概應該有一個“負載”或“就緒”，或在事物可用時觸發此類事件。 在早期版本的jQuery中，我將使用委托（）或live（）;。 但是這些功能已被棄用，並且當前文檔說要使用on（“ load”，handler）或其快捷方式load（）。 我從https://api.jquery.com/load-event/獲得此信息。

到目前為止，以下所有方法均無效：

 $(".contact-form").load(function(){
    console.log("Hi there!");
  }); 

和

 $(".contact-form").on("load", function(){
    console.log("Hi there!");
  }); 

並且，在基於Jquery事件處理程序的思想而無法處理動態內容的冰雹瑪麗中，

 $(document.body).on("load", ".contact-form", function(){
    console.log("Hi there!");
  });      

任何指針表示贊賞。

Answer 1

為什么根本需要一個活動？ 如果表單是動態添加的，則運行您當時需要的內容

var form = '<form class="contact-form"></form>';
$('body').append(form);
console.log("Hi there!");

Answer 2

此方法是.on（“ load”，handler）的快捷方式。

當加載事件和所有子元素都已完全加載時，會將加載事件發送到該元素。 該事件可以發送到與URL關聯的任何元素：圖像，腳本，框架，iframe和window對象。

例如，考慮一個帶有簡單圖像的頁面：

<img src="book.png" alt="Book" id="book">

事件處理程序可以綁定到圖像：

$( "#book" ).load(function() {
  // Handler for .load() called.
});

加載圖像后，立即調用處理程序。

現在將其放入准備好的處理程序中

$( document ).ready(function() {
  // onload functions here
});

Answer 3

如果使用.load()作為.on('load')的快捷方式.on('load')稱為load event ，則匹配的元素（在這種情況下為form ）在頁面加載時必須存在。 jQuery <1.7具有.live()函數，該函數可以偵聽動態添加到頁面中的新元素，但是由於各種原因，它在jQuery 1.7中已被刪除，性能是主要原因。

其他選擇

jQuery LiveQuery是一個插件，聽起來像它會完全滿足您的需求。 https://github.com/brandonaaron/livequery

jQuery Entwine將使用livequery監視新的DOM元素，但還允許您創建DOM元素並將它們用作定義了自己方法的完整對象。 https://github.com/hafriedlander/jquery.entwine

jQuery的.on（）文檔的更多信息

您可以使用Delegated events創建單擊處理程序，當將元素動態添加到原始選擇器（通常是容器）時，該處理程序將觸發，例如：

$( "#dataTable tbody" ).on( "click", "tr", function() {
  alert( $( this ).text() );
});

現在，當動態添加新的<tr> ，它將綁定click處理程序。 但是，沒有將元素實際加載到DOM中的事件。

事件處理程序僅綁定到當前選定的元素； 當您的代碼調用.on（）時，它們必須存在於頁面上。 為了確保元素存在並可以選擇，請在文檔就緒處理程序內對頁面上HTML標記中的元素執行事件綁定。 如果將新HTML注入到頁面中，請在將新HTML放入頁面后選擇元素並附加事件處理程序。 或者，使用委托事件來附加事件處理程序，如下所述。

委派事件的優勢在於，它們可以處理來自后代元素的事件，這些事件在以后的時間添加到文檔中。 通過選擇保證在附加委托事件處理程序時會出現的元素，您可以使用委托事件來避免頻繁附加和刪除事件處理程序的需要。 例如，如果事件處理程序想要監視文檔中的所有冒泡事件，則此元素可以是Model-View-Controller設計中視圖的容器元素，也可以是文檔。 在加載任何其他HTML之前，document元素位於文檔的開頭，因此可以在其中附加事件，而不必等待文檔准備就緒。