jQuery .on（）未綁定到所有將來的事件

Question

我試圖弄清楚為什么jQuery不綁定到我頁面上所有將來的“單擊”事件。 僅在我第一次這樣做時才有效。 AJAX請求將觸發，並顯示將正確的數據添加到DOM，但是不會觸發任何后續嘗試。 當我選擇“查看所有經銷商”按鈕時，AJAX請求返回經銷商的JSON數組並將其顯示在頁面上。

$(function(){
  $("body").on("click", "#all-dealerships", function(e){
    let path = $(this).attr("href");

    $.ajax({
      url: path,
      dataType: 'json',
      success: function(response){
        var source = $("#dealerships-template").html()
        var template = Handlebars.compile(source)
        var result = template(response)
        var a = () => document.getElementsByTagName("body")[0].innerHTML = ""
        a()
        document.getElementsByTagName("body")[0].innerHTML += result
        }
    })
    e.preventDefault()
  })
})

變量名稱和結構僅用於測試。 身體是不變的靜態元素。 我嘗試將按鈕包裝在div中，並將其用作綁定事件的父對象，但是得到的結果相同。 該頁面僅不使用AJAX加載。 僅當我刷新整頁時才綁定該事件。 導航到網站上的其他頁面不能解決問題。

將新元素添加到DOM時，不存在觸發AJAX請求的按鈕。 它被刪除。 導航回該按鈕的操作不會重新觸發click事件。

Answer 1

你在做什么

您綁定一個事件，並在ajax調用中刪除體內的所有元素，但是DOM中可能存在虛擬的'div'元素。

因此，由於此原因，您在id上綁定了一個事件（該事件僅在一個元素上綁定了事件），因此不會觸發您的點擊

所以你要做的是

插入

document.getElementsByTagName("body")[0].innerHTML = ""

和

 document.getElementsByTagName("body")[0].innerHTML += result

做這個

$('body').empty();

和

$("body").html(result);

這樣可以確保刪除體內的所有元素。

Answer 2

最終解決我問題的是將事件綁定更改為$(document).on(...)而不是$('body').on(...)

當新的HTML內容附加到DOM時，觸發AJAX請求的按鈕不再可用。 導航回到該按鈕所在的頁面不會觸發綁定到body元素的事件。 以文檔為目標，確保該事件每次都會重新觸發。

AJAX加載的內容是否獲得“ document.ready”？