div加載時無法運行jquery腳本，在DOM加載之前運行jquery代碼

Question

我已經尋找了很多解決方案，但找不到解決方案...您能幫我嗎？ 我想在加載div時運行代碼。 我不想等待加載頁面的結尾。

所以我正在使用$(sel).on('load', function(){ ... }); 當我將$(window).on('load', function(){ ... }); 但是當我指定div $('#collapseTrack').on('load', function(){ ... });的ID時卻沒有

這是我所有的代碼：

$（'＃collapseTrack'）。on（'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之后

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

Answer 2

單個div沒有特定的.load()事件。 因此，您唯一真正能在代碼中找到#collapseTrack div的地方是，是在頁面加載程序已解析該div並將其添加到DOM之后，還是當某些Javascript代碼將其添加到頁面后，您是否運行了一些代碼。

在div加載后立即運行代碼的最簡單方法是在HTML中<div>之后放置<script>標記。

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

由於頁面是按順序解析的，因此可以確保頁面中此<script>標記之前顯示的所有HTML都已經在DOM中，並且可以在此<script>標記運行之前訪問。

---

如果您願意等到頁面本身解析到最后，可以執行以下操作：

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

至少在window.load ，它會在等待所有頁面資源（包括圖像，樣式表等）完成加載的window.load運行：

$(window).on('load', function() {
    // waits for all page resources to finish loading
    $('#collapseTrack')....
});