在已加载到页面中的元素上运行脚本

debugcn 发表于 Dev

灯笼红

我正在通过jQuery加载顶部导航：

<script> 
    $(function(){
        $("#top-nav").load("top-nav.html");
    });
</script>

这将加载如下内容：

<ul class="list-inline text-center navigation">
    <li>
        <a href="one.html">
            one
        </a>
    </li>
    <li>
        <a href="two.html">
            two
        </a>
    </li>
    <li>
        <a href="three.html">
            three
        </a>
    </li>
</ul>

效果很好。我现在正在尝试使用以下脚本在活动链接上加上下划线：

<script type="text/javascript" charset="utf-8">
    var url = window.location.href.split('/').pop();
    jQuery(function() {
        jQuery('ul a').each(function() {
            if(jQuery(this).attr('href') === url) {
                jQuery(this).parent().addClass('underline-nav');
            }
        });
    });
</script>

但是，它不起作用，因为它找不到one.html，two.html，three.html。我知道这是因为，如果我将top-nav.html的内容粘贴到正文中，而不是加载它，那么效果很好。

这是我的问题：如何在加载到页面的元素上运行脚本？

谢谢。

奥米丹81

使用此代码。

<script> 
$(function(){
    var url = window.location.href.split('/').pop();
    $("#top-nav").load("top-nav.html", function(){

    jQuery('ul a').each(function() {
        if(jQuery(this).attr('href') === url) {
            jQuery(this).parent().addClass('underline-nav');
        }

   });
});
});

本文收集自互联网，转载请注明来源。

如有侵权，请联系[email protected] 删除。