加载 div 时运行 jquery 脚本不可能， DOM 加载前运行 jquery 代码

Question

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

所以我正在使用 $(sel).on('load', function(){ ... }); 它在我输入 $(window).on('load', function(){ ... }); 时有效，但在我指定 div $('#collapseTrack').on('load', function(){ ... });[=20 的 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 之后运行代码的最简单方法是在 [=31= 中的 <div> 之后放置一个 <script> 标签].

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

由于页面是按顺序解析的，这确保了页面中此 <script> 标记之前出现的所有 HTML 已经在 DOM 中并且在此 [=15] 之前可访问=] 标签运行s.

如果您愿意等到页面本身被解析到最后，您可以这样做：

$(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')....
});

加载 div 时运行 jquery 脚本不可能， DOM 加载前运行 jquery 代码

impossible to run jquery script when div is loaded, run jquery code before DOM load

html

javascript

css

jquery

load

加载 div 时 运行 jquery 脚本不可能， DOM 加载前 运行 jquery 代码

impossible to run jquery script when div is loaded, run jquery code before DOM load

html

javascript

css

jquery

load

加载 div 时运行 jquery 脚本不可能， DOM 加载前运行 jquery 代码