divがロードされているときにjqueryスクリプトを実行することができませんDOMロードの前にjqueryコードを実行します

Question

私は多くの解決策を探しましたが、見つけられませんでした。 divがロードされたときにコードを実行します。私はロードページの終わりを待っていません。

だから私は$(window).on('load', function(){ ... });を入れているとき、私はそれが働いていますが$(sel).on('load', function(){ ... });を使用していますが、私はdivのここ$('#collapseTrack').on('load', function(){ ... });

のIDを指定しなかったときにすべての私のコード： `

$（」 （ 'load'、function（）{

$('#nav-maps').on('click', function(event) {   
    $('#nav-maps').addClass('active').removeClass('inactive'); 
    $('#nav-trace').removeClass('active').addClass('inactive');   
}); 

$('#nav-trace').on('click', function(event) {   
    $('#nav-trace').addClass('active').removeClass('inactive'); 
    $('#nav-maps').removeClass('active').addClass('inactive');   
}); 



$('.collapse-nav').on('click', function(event) { 

    $('#collapseTrack').toggleClass('DivClose').toggleClass('DivOpen'); 

    if ($('#collapseTrack').hasClass('DivClose')) { 

     $('.collapse-button').html('<i class="fa fa-angle-down"></i>'); 
     $.cookie("toggle", 0, { expires : 10 }); 
    } 

    else { 

     $('.collapse-button').html('<i class="fa fa-angle-up"></i>'); 
     $.cookie("toggle", 1, { expires : 10 }); 
    } 


}); 



if ($('#collapseTrack').hasClass('DivClose')) { 

    $('.collapse-button').html('<i class="fa fa-angle-down"></i>'); 

} 

else { 

    $('.collapse-button').html('<i class="fa fa-angle-up"></i>'); 

} 

}）;

ありがとう!!!

Answer 1

後に単一のdivのための具体的な​​のイベントはありません。したがって、コード内で#collapseTrack divが実際に見つかる唯一の時間は、divが解析されてページローダーによってDOMに追加された後、またはいくつかのJavaScriptコードによってページに追加された後に、いくつかのコードを実行する場合です。

divがロードされた直後にコードを実行する最も簡単な方法は、HTML内に<div>の直後に<script>タグを配置することです。

<div id="collapseTrack">Your HTML</div> 
<script type="text/javascript"> 
    $('#collapseTrack').... 
</script> 

ページが順次解析されているので、このページでは、この<script>タグの前に表示されるすべてのHTMLは、この<script>タグを実行する前にDOMおよびアクセス可能で、すでにあることを保証します。

---

あなたはページ自体が最後に解析されるまで待つために喜んでいる場合は、あなたがこれを行うことができます：

$(document).ready(function() { 
    // waits for just the DOM to be finished parsing and inserted 
    $('#collapseTrack').... 
}); 

少なくとも以前のロード処理でwindow.loadよりも実行されますすべてのページリソースのロードが完了するのを待ちます（イメージ、スタイルシートなどを含む）。

Answer 2

プット・スクリプトタグのdiv

...html here... 
    <div id="your div">foo</div> 
    <script type="text/javascript"> 
     //code here 
    </script> 
...more html here...