單擊事件對 Ajax 加載的內容不起作用

Question

我正在使用 ajax 從外部 HTML 文件加載內容。 不知道為什么在加載內容后，單擊事件在任何新加載的元素（ul、li、圖像等）上的 safari（移動 safari 也是如此）中不起作用。 但是，這在 mozilla 中有效。

我無法理解這背后的確切問題。 請給我建議解決方案。 下面是代碼供參考。

注意：我在 jquery ready 函數下使用以下代碼。 jquery 是問題的原因嗎？？

var currentBottle = this.title; var request = createRequest(); if (request == null) { alert("無法創建請求"); 返回; } request.onreadystatechange = showContent; request.open("GET", currentBottle + ".html", true); request.send(null);

function showContent() { if (request.readyState == 4) { if (request.status == 200) { document.getElementById("food_scroller").innerHTML = request.responseText; } } }

Answer 1

當頁面的內容通過 ajax 加載時，事件綁定會中斷。 您必須使用以下過程在文檔中再次綁定事件。

做這個

$(document).on('click', '.classname' ,function (e) {
    // write your logic
});

代替

$('.classname').on('click' ,function (e) {
    // write your logic
});

Answer 2

在 Safari 中，內容類型有時很重要，請確保將響應類型設置為text/html 。 同樣在您的 AJAX 加載內容中，您應該盡量不要使用<script>標簽，我認為 Safari 有時不尊重這些標簽。

也許嘗試使用 jQuery 的$.load()來獲取跨瀏覽器兼容的 HTML 內容（下面相當於你的 createRequest 和 showContent 函數）：

var currentBottle = this.title;
$.load(currentBottle + ".html",
    function(responseText,textStatus,XMLHttpRequest){
        $("#food_scroller").html(responseText);
        //bind you on click events here
        $("#food_scroller").find("ul, li, images").click(myClickFunction);
  }
);

Answer 3

我自己也經歷過這個問題。 通過 Ajax 新加載的 html 需要連接到事件處理程序，即使它正在替換現有的 DOM 元素。 為此，您必須在 AJAX 結果中包含為正在呈現的所有事件敏感元素建立處理程序。

例如，如果您的 AJAX 調用返回

$ajaxresult = '<button class="bookbtn" id="bookbtn" type="button" >Book</button>';

你需要添加

$ajaxresult .= '<script>$("#bookbtn").on("click",function(){doit($(this))});</script>'."\n";

然而，在剛剛研究這個問題時，我在http://api.jquery.com/on/ 中閱讀了以下內容：

事件處理程序僅綁定到當前選定的元素； 它們必須在您的代碼調用 .on() 時存在。 為了確保元素存在並且可以被選擇，在 HTML 標記中的元素之后放置腳本或在文檔就緒處理程序中執行事件綁定。 或者，使用委托事件來附加事件處理程序。

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

除了它們能夠處理尚未創建的后代元素上的事件之外，委托事件的另一個優點是當必須監視許多元素時，它們的潛在開銷要低得多。 在其 tbody 中有 1,000 行的數據表上，此示例將處理程序附加到 1,000 個元素：...