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

我找过很多解决方案，但是找不到一个......你能帮我吗？我想在div加载时运行代码。我不想等待加载页面的结束。当div加载时无法运行jquery脚本，在DOM加载之前运行jquery代码

所以我使用的是$(sel).on('load', function(){ ... });它的工作时，我把$(window).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>'); 

}

}）;

谢谢！在div

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

来源

2016-03-29 Benjamin Olivier

div的''load（）'。你不需要一个事件，你可以看到div或你不能... – dandavis

后

来源

2016-03-29 02:41:41 jfriend00

@BenjaminOlivier - 你有解决你的问题吗？如果是这样，请通过选中答案左侧的绿色复选标记来标记此（或其他答案）作为您选择的答案，这将向社区表明您的问题已得到解答，并将为您赚取一些可以赚取的声望点你在这里有更多的特权。 – jfriend00

非常感谢@ jfriend00，它解决了我的问题！又一次简单的逻辑问题！ –

放脚本标记有单个的div没有具体事件。因此，在代码中唯一一次能够找到#collapseTrack div的是，如果在div已经被页面加载器解析并添加到DOM之后运行了一些代码，或者它已被一些Javascript代码添加到页面中。

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

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

由于页顺序分析，这确保了之前在本页面标签<script>已经在DOM，这<script>标签用完之前访问时出现的所有HTML。

如果你愿意等待，直到自己已经被解析到最后的页面，你可以这样做：

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

来源

2016-03-29 02:40:15

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

回答

相关问题