javascript - 加载 div 时无法运行 jquery 脚本，在加载 DOM 之前运行 jquery 代码

Question

我找了很多解决方案，但找不到一个...你能帮我吗？ 我想在加载 div 时运行代码。我不想等待加载页面结束。

所以我正在使用 $(sel).on('load', function(){ ... }); 当我输入 $(window ).on('load', function(){ ... }); 但是当我指定 div $('#collapseTrack').on('load', function (){ ... });

这是我所有的代码: `

$('#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

没有具体.load()单个 div 的事件。所以，只有一次你才能真正找到 #collapseTrack代码中的 div 是在该 div 被页面加载器解析并添加到 DOM 之后或者当它被一些 Javascript 代码添加到页面时运行一些代码。

在加载该 div 后立即运行代码的最简单方法是放置一个 <script>在 <div> 之后标记在您的 HTML 中。

<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).on('load', function() {
    // waits for all page resources to finish loading
    $('#collapseTrack')....
});