関数を使用してファイルをロードしようとすると.load
、その新しくロードされたファイルは、ロード先の親ファイル内のjQueryの影響を受けません。ロードされているすべてのページにコードを追加する代わりに<script src=''></script>
、JavaScriptファイルをそれらのファイル内で機能させるためのより良い方法はありますか?それとも、新しくロードされたファイル内でjavascriptを機能させる唯一の方法ですか?
2 に答える
それはすべて、スクリプトがどのように設定されているかによって異なります。スクリプトがないということは、正確な解決策がないことを意味します。
この.load()
メソッドは、現在のスクリプトの実行中にスクリプトをロードします。つまり、ファイルがロードされているときに、スクリプトの実行が完了している可能性があります。
そのため、コールバックがあります。コールバックは、別のアクションが実行された後に実行されます。
$.load(url, function(responseText, textStatus, XMLHttpRequest) {
var paragraph = $('<p />').html(responseText);
// append new paragraph
$(document.body).append(paragraph);
});
// hide all paragraphs
$('p').css('display', 'none');
すべての段落を非表示にするため、追加される段落が非表示になると思われるかもしれません。
間違い
段落が本文に追加されるまでに、段落を非表示にする行はすでに完了しています。したがって、次のように(再び)コールバックでアクションを実行する必要があります。
$.load(url, function(responseText, textStatus, XMLHttpRequest) {
var paragraph = $('<p />').html(responseText);
// append new paragraph
$(document.body).append(paragraph);
// do it again
$('p').css('display', 'none');
});
// hide all paragraphs
$('p').css('display', 'none');
ページが読み込まれた後、イベントハンドラーを要素にバインドしようとしているように聞こえますか?たとえば、次のようなことを行う何かが親ドキュメントにある場合があります。
$('#something').click(function(){ alert('You clicked me'); }
これらのイベントハンドラーはすぐに「バインド」され、.load()を使用してロードされた要素には影響しません。あなたがしなければならないことは、live()
バインダー、またはバインダーを使用することです.on()
。.on()
が望ましいですが、そもそも慣れるのは少し奇妙かもしれません。
問題を解決する最も簡単な方法は、イベントバインドを、、 ectから、およびにそれぞれ変更.click
する.change
こと.live('click', function(){} )
です.live('change', function(){})
。
または、正しい方法を使用して、次のon()
ことを行う必要があります。
$(document).on('click', '#element', function(){ alert('you clicked me'); });
メソッドを実行する要素は、バインディングが内部にあるすべての要素on
を介してではなく、ロードされる親コンテナーである必要があります。十分であり、機能しますが、パフォーマンスに関しては最善ではありません.load
document
コードを投稿すると、よりカスタマイズされた回答を提供できます。私はそれを詳細に説明するために最善を尽くしましたが、私はそれを複雑にしすぎたかもしれません。したがって、質問がある場合は、質問してください。
jQuery.on():http ://api.jquery.com/on/
jQuery.live():http ://api.jquery.com/live/