如何在已加載到另一個html文檔的html文檔上使用jquery？

Question

我有一個正在加載到我的index.html中的heading.html文件。

heading.html

<header id="header"> 


<div class="logo"></div> 

<nav> 

    <a href="#home" class="slide-section">Home</a> 
    <a href="#about-me" class="slide-section">About Me</a> 
    <a href="#why-me" class="slide-section">Why Me?</a> 
    <a href="#contact" class="slide-section">Contact</a> 

</nav> 

</header> 

然後在我加載在這個文件我的JavaScript文件，它不會讓我做任何其他的功能。

functions.js

$(document).ready(function() { 

    $(function(){ 
    $("#includedHeader").load("/assets/_includes/header.html"); 
    }); 

    $(function(){ 
    $("#includedFooter").load("/assets/_includes/footer.html"); 
    }); 

    $(function(){ 
    $("#includedWhyme").load("/assets/_includes/why-me.html"); 
    }); 

    $(".slide-section").click(function(){ 
    alert('clicked'); 


    }); 

}); 

正如你可以看到我試圖做一個警報彈出只是爲了測試它是否工作，但事實並非如此。

有沒有一種方法可以在這些正在加載的html文件上使用其他函數。

Answer 1

當你綁定像這樣的事件$(".slide-section").click()時，元素還沒有。​​仍然從服務器獲取內容。

但是，您可以在文檔（委託事件）中使用on方法。它做了一個live事件附件（即使該元素僅在將來存在，該事件仍將被捕獲）。

從.on() docs：

委託事件的優勢在於他們可以處理來自被添加到該文件在稍後的時間 後代元素的事件。通過 挑選一個在連接了委託事件處理程序時保證存在的元素，可以將委派事件用於 ，避免需要頻繁地附加和刪除事件處理程序。例如，這個 元素可能是模型 - 視圖 - 控制器設計中的視圖的容器元素，或者處理程序想要監視文檔中的所有冒泡事件的文檔。

另一個建議（如果我可能）是從您的load電話附近刪除$(function(){}。 $(handler)是速記對於$(document).ready(handler)。所以，就好像你一次調用它，你不再需要它們。

所以，我的建議是這樣的：

$(document).ready(function() { 

    $("#includedHeader").load("/assets/_includes/header.html"); 
    $("#includedFooter").load("/assets/_includes/footer.html"); 
    $("#includedWhyme").load("/assets/_includes/why-me.html"); 

}); 

$(document).on("click", ".slide-section", function(){ 
    alert('clicked'); 
}); 

Answer 2

不直接使用點擊（）方法..這是行不通的，如果內容是不是已經在這個document..instead使用.on（）方法來指定click方法，它的委託具有可以處理後來添加到文檔中的後代元素的事件的優點。 所以我從我的觀點使用點以下各項

$(document).on("click", ".slide-section", function(){ 
    alert('clicked'); 
});