19

コードを別々にしたいので、それぞれdivをhtmlファイルに分割することにしました。各 HTML ファイルには、いくつかの jQuery クリック イベントがあります。私は2つのファイルindex.htmlとmenu.html.

問題は、jQuery ライブラリを両方のファイルに含めて機能させる必要があることです。

ライブラリを一度に含めて、両方のファイルで機能させる方法はありますか? ライブラリをインデックス ページのみに含めようとしましたが、メニュー クリックが機能しません。

menu.htmliframeを介してファイルを含めました。

<iframe src="left-menu.html"></iframe>
4

3 に答える 3

41

jQueryメソッドを使用しmenu.htmlて の DOM に追加できます。このようにして、 で作成された jQuery インスタンスは、からロードされたコンテンツにも適用されます。index.htmlload()index.htmlmenu.html

たとえば、次のindex.htmlことができます。

$(document).ready(function() {
    $('#some-menu').load('some-local-path/menu.html');
});

howはのコンテンツをロードする$('#some-menu')もう 1 つの要素であることに注意してください。same-origin-policyのため、メソッドの一部として実行される AJAX リクエストは、同じドメイン、プロトコル、およびポート内のファイルでのみ機能することに注意することも重要です ( CORSを使用している場合を除く)。index.htmlmenu.htmlload()

于 2013-03-10T09:38:49.597 に答える
4

別の解決策があります。コードをより美しく、より短くするようです。最初に include 関数を定義します。

var include = function(beReplacedId,url){
jQuery.get(url,function(data){
    jQuery(beReplacedId).replaceWith(data);

});

}

html ページで onload を使用して、このようにインクルードをトリガーします。

<img id="partTopicDetail" onload="include(this,this.id+'.html')" src="img/any-image.png" >

コンパイラが実行されると、img タグが置き換えられ、必要なものが読み込まれます。上記のトリックを使用すると、index.html の任意の場所にアタッチできます。

于 2014-11-14T07:13:28.980 に答える