有沒有辦法對通過jQuery .load（）加載的動態HTML進行全局事件綁定？

Question

我有一個使用jQuery .load（）從其他文件中提取HTML的HTML頁面。 我這樣做主要是出於可讀性目的。

我遇到了一個問題，即由於.load（）是異步的，因此通過.load（）加載的代碼對於以后在模塊中加載的其他javascript不“可見”。 通過在.load（）回調中執行.click（）綁定，在我的另一個StackOverflow問題中解決了這一問題，並取得了很好的結果。 照常照做！

現在，我還有另一個與此相關的問題。

HTML：

        <div class="mainContent" style="color:white; overflow-y: auto; position:fixed; top:210px; bottom:60px;">
            <div class="linkContent" id="contentAboutUs"        style="display:none"></div>
            <div class="linkContent" id="contentAboutUsCompany" style="display:none"></div>
            <div class="linkContent" id="contentAboutUsVerify"  style="display:none"></div>
            <div class="linkContent" id="contentAboutUsSelf"    style="display:none"></div>
            <div class="linkContent" id="contentAboutUsHow"     style="display:none"></div>
        </div>

jQuery ready（）函數：

$("#contentAboutUs").load("contentAboutUs.html");
$("#contentAboutUsCompany").load("contentAboutUsCompany.html");
$("#contentAboutUsVerify").load("contentAboutUsVerify.html");
$("#contentAboutUsSelf").load("contentAboutUsSelf.html", function () { $(".saveButton").click(function () { saveForm(); })  });
$("#contentAboutUsHow").load("contentAboutUsHow.html");

您將注意到，在AboutUsSelf .load（）上，回調將“ .saveButton”的click事件綁定到名為saveForm（）的函數。 這非常有效，這是我從上一個SO問題得到的答案。

如您所見，“。saveButton”是一個類，實際上，此按鈕將在表單的許多頁面上； 這就是為什么它是類而不是ID的原因。

然后的問題是：我不想在包含這些按鈕之一的每個部分上執行click（）綁定。 有沒有一種方法可以動態地對該HTML進行.load（），然后全局應用此click（）綁定，而不是在每種需要的情況下單獨在.load（）回調中單獨進行處理？

Answer 1

由於您是將它們加載到容器中，因此可以使用它。

$('.mainContent').on('click','.saveButton', function(){
     saveForm();
});

用這種方式綁定的事件處理程序綁定到容器，並且它在“內部”尋找按鈕的選擇器。 您無法直接綁定到該按鈕的類，因為在將其加載到DOM中之前，沒有任何可綁定的類。

綁定到最近的容器（例如，不是文檔），您可以避免使用超大型DOM產生深層的“內部查看”影響。

請注意，您在這里還遇到的一件事是服務器多次命中-即，如果HTML緩存已經存在於頁面中，並且僅以這種方式命中一次，您將從中受益。 就是說，動態頁面部分是在容器級別進行此類型綁定的很好的候選者。

例如，使用ASP.NET MVC，可以將它們放在部分視圖中，並在進入瀏覽器之前進入頁面。

您沒有要求，但是我也將樣式移動到CSS文件中，而不是將其放入標記中-這樣可以使標記更整潔，更容易修改。

Answer 2

看看ajaxComplete-應該能夠在其中附加click事件並將其應用於加載的所有新按鈕

Answer 3

我相信您正在尋找的是事件委托 。

本質上，您可以做的是使用on（）將事件監聽器綁定到一個包含元素，而不是直接在您正在監聽的元素上。 相關信息：

如果我們單擊新添加的項目，則不會發生任何事情。 這是因為我們之前附加了直接綁定的事件處理程序。 直接事件僅在調用.on（）方法時附加到元素。 在這種情況下，由於在調用.on（）時我們的新錨點不存在，因此它不會獲取事件處理程序。

例：

$("#container-of-some-sort").on("click", ".saveButton", function(){ 
    saveForm(); 
});