別の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メソッドを使用できます。 ライブイベントの添付ファイルがあります（将来、その要素のみが存在する場合でもイベントはキャッチされます）。 .on() docsから

：

委任イベントは、彼らが後で文書に追加され 子孫要素からイベントを処理できるという利点があります。 委任イベントハンドラがアタッチされているときに存在することが保証されている要素を選択すると、委任されたイベントを に頻繁にアタッチして削除する必要がなくなります。この 要素は、 ハンドラがドキュメント内のすべてのバブリングイベントを監視したい場合は、 モデルビューコントローラの設計、またはドキュメントのビューのコンテナ要素です。

もう1つの提案（可能であれば）loadコールの周辺から$(function(){}を削除することです。 $(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'); 
});