jQuery綁定事件無法在通過$（）。load（）加載的元素上觸發

Question

我有一個.html文件中的DIV，該文件通過以下方式加載到我的文檔中：

$(document).Ready( function() {
    $("#contentDiv").load("some.html")


    //some.html contains a button id=saveButton
    $("#saveButton").click( function () {
        alert("Here I am!");
    }

});

該事件不會觸發。 如果我將some.html的內容剪切並“物理地”放入文檔中，則事件將觸發。

因此，我很確定這個問題與通過.load（）注入html有關。

這很麻煩，因為如果您查看頁面源代碼，實際上所有HTML都在那里，包括按鈕。

所以，問題是，有什么辦法可以使這項工作嗎？ 我正在使用.load（）來降低頁面復雜性並提高可讀性，並且盡管進行了代碼折疊，但我確實不想將所有這些HTML都放入文檔中。

編輯 ：此代碼只是袖手旁觀鍵入。 這不是實際代碼的精打細算，僅僅是為了演示問題所在。 但是，感謝您指出這一點。

編輯2 ：Grrrrrrr。 }）;

Answer 1

load()是異步的，因此您需要在回調中進行作業：

$(document).ready(function() {
    $("#contentDiv").load("some.html", function(){
        //some.html contains a button id=saveButton
        $("#saveButton").click( function () {
            alert("Here I am!");
        });
    });
});

希望能幫助到你 ：）

Answer 2

一種方法是將腳本行添加到some.html中，該腳本行將在div出現時加載。

您可以將此腳本添加到some.html（在script標記中）：

registerButton();

然后您可以在當前文檔中定義registerButton（）。

換句話說，如果我沒記錯的話，是使用諸如bind（）之類的函數

Answer 3

jQuery load（）函數是異步的。 如果要將事件綁定到加載的內容，則應將代碼放入回調函數中：

$(document).ready(function() {
    $("#contentDiv").load("some.html", function() {
        //you should put here your event handler
    });

});

Answer 4

如果您想對DOM准備就緒時尚不可用的元素觸發事件，則需要使用.on事件。

http://api.jquery.com/on/

$("#saveButton").on("click", function() {
      alert("Here I am!");
});

Answer 5

您的問題是，如@lucas所述 ，jquery load（）函數是異步的。 但是他的代碼有語法錯誤，請嘗試以下操作：

    $(document).ready(function () {
        $("#contentDiv").load("some.html", function () {
            $("#saveButton").click(function () {
                alert("Here I am!");
            });
        });
    });

希望現在有所幫助

Answer 6

您需要在加載后綁定事件處理程序，或將加載后的事件處理程序綁定到HTML的容器

$(document).ready(function() {
  $("#contentDiv").load("some.html", function() {
    $("#saveButton").on('click',function() {
      alert("Here I am! Bound in callback");
    });
  });
});

或使用：（不需要在文檔中僅准備存在contentDiv ）

$("#contentDiv").on('click','#saveButton',function(){
     alert("Here I am! bound to container div");
});

編輯：在“保存”按鈕上單擊（按評論）加載（盡管這沒有任何意義）

$(document).ready(function() {
  $("#saveButton").on('click',function() {
    $("#contentDiv").load("some.html", function() {
      alert("Here I am! Bound in callback");
    });
  });
});