0

メインページの読み込みが完了した後にコンテンツ（jQueryに応じた要素を含む）を読み込むことができるようにしたい場合、コンテンツは自分のサイト（div）の別のページから取得されます。次に、jQueryに応じてこれらの要素を実行（動作）させるにはどうすればよいですか？

これらのさまざまなjQuery要素をメインページにロードした後、簡単な方法で機能させるにはどうすればよいですか？jQueryについてはよくわかりません。スクリプトの関数をアド/エディットして、ロード後に機能させることができれば素晴らしいのですが、それよりも難しいのではないでしょうか。過ぎ去った日々、私はロードされる別のオブジェクトを初期化しようとしましたが、複雑なスクリプトでは非常に難しいことに気づきました。

次のような新しいコンテンツでのページの読み込み（選択ボックス）：

<select id="selectbox"> 
<option>1</option>
</select>

選択ボックスへのjQueryコード：

$(document).ready(function(){ 
$("#selectbox").change(function(){ 
var selectedOption = $('#selectbox :selected').val(); 
$containerDiv = $('#div_that_will_get_content'); 
$containerDiv.html("");
        switch (selectedOption)
        {
        case "1":$containerDiv.load( "Page.html #div1 );break;
        }
return true;
}); 
});

selectbox（1）で選択されたオプションは、Page.html＃div1からデータを収集し、そのデータをdiv"#div_that_will_get_content"に送信します。したがって、メインページの読み込みが完了した後、divが読み込まれます。

ここで、jQuery要素をこのdivに配置し、そのdivを選択ボックスを介してメインページにロードし、「＃div_that_will_get_content」にロードしたい場合、これらの要素は機能しません。スクリプトが最初からどのように書かれたか、そしてスクリプトがロードされた後にそれを機能させるために何を変更したかについての簡単な説明を含む簡単なjQueryの例を誰かが示すことができますか？

ありがとう。

4

1 に答える 1

2

何が必要なのか完全にはわかりませんが、答えの一部はの成功コールバックを使用することにありますload()

/* define this cached elemn outside change handler so don't have to search DOM each time*/
$containerDiv = $('#div_that_will_get_content');

$("#selectbox").change(function() {
    /* val() of select is same as searching for selected option val() but less code*/
    var url = 'Page.html #div' + $(this).val();
    $containerDiv.load(url, function() { 
         /* new ajax loaded html exists you can run code here*/
        $containerDiv.find('#someOtherDiv').doSomething()
    })

});

API リファレンス: http://api.jquery.com/load/

問題が、クリック ハンドラーなど、将来いつでも読み込まれる要素にイベントをバインドすることに関連している場合は、次を使用してページ読み込みスクリプトでこれらを委任できます。on()

$(document).on('click', '.className', function(){
     doSomething();
})
于 2012-12-22T21:53:23.923 に答える