jQuery不適用於文檔加載后創建的元素

Question

我用jQuery創建了兩個元素：

圖片和關閉按鈕

我寫了代碼來刪除doument.ready函數：

$( ".deletepreview" ).click(function() {
    code = $(this).data("prevcode");
    $('#'+code).remove();
    $(this).remove();
});

但它不起作用，我認為這是因為代碼不會搜索文檔加載后創建的代碼。

我怎么解決這個問題？

Answer 1

如果要在動態添加的元素上處理事件，則需要通過on()使用委托事件：

$(document).on("click", ".deletepreview",function() {
  var code = $(this).data("prevcode");
  $('#'+code).remove();
  $(this).remove();
});

我略微修改了你的例子：除非你需要，總是用閉包中的var聲明變量。

Answer 2

對於動態創建的元素，嘗試使用委托與on ：

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

委托事件的優點是，它們可以處理來自稍后添加到文檔的后代元素的事件。 通過選擇在附加委托事件處理程序時保證存在的元素，您可以使用委派事件來避免頻繁附加和刪除事件處理程序的需要。 例如，此元素可以是模型 - 視圖 - 控制器設計中視圖的容器元素，如果事件處理程序想要監視文檔中的所有冒泡事件，則可以是文檔。 在加載任何其他HTML之前，文檔元素在文檔的頭部可用，因此可以安全地將事件附加到那里而無需等待文檔准備就緒。

碼：

$('body').on('click', '.deletepreview', function() {
  var code = $(this).data('prevcode');
  $('#'+code).remove();
  $(this).remove();
});