使用JQuery load()停止materializecss滑出效果

时间:2015-07-21 13:58:04

标签: jquery html5 css3 materialize

我正在使用materializecss创建一个网页,并考虑使用jQuery创建一个“母版页”,以避免在多个页面中重复(和纠正)相同的事情。当我应用以下内容时出现问题:

<header>
    <script>
        $().ready(function () {
            $("header").load("master.html");
        });
    </script>
</header>

并尝试带一个包含的侧面导航(到目前为止,所有这些都在master.html上):

<nav>
    <ul id="slide-out" class="side-nav fixed">
        <li><a href="index.html">Início</a></li>
        <li><a href="sobreSrd.html">Sobre os SRDs</a></li>
        <li><a href="noticias.html">Noticias</a></li>
        <li><a href="combinacoes.html">Combinações</a></li>
        <li><a href="filhotes.html">Filhotes</a></li>
        <li><a href="adote.html">Adote</a></li>
    </ul>

    <a id="mobButton" href="#" data-activates="slide-out" class="button-collapse">
        <i class="mdi-navigation-menu"></i>
    </a>
</nav>

经过研究,我发现jQuery的加载方法会从html中删除脚本(如果我错了,请纠正我)。有人建议再次加载脚本,但它不起作用。我认为它与data-activates属性/属性有关,但我找不到很多关于它的信息。

有人有这个问题吗?你是怎么解决的?

2 个答案:

答案 0 :(得分:1)

经过大量的试验和测试,让我的同行参与到这个问题中。我们注意到html文件仅在为标记分配事件的脚本之后加载。

要解决此问题,我将调用更改为:

$("header").load("master.html", function () { /*code to execute*/ });

允许在完成任何工作之前加载文件。 有关详细信息:http://api.jquery.com/load/

答案 1 :(得分:0)

我有同样的问题。但这对我有用。

我做什么?当需要加载html时,我再次加载实现css:

$("header").load("master.html", function () { jQuery.getScript("materialize.js"); });

作品!但是......在调试控制台中显示此消息: 已加载Velocity。您可能会不必要地再次导入Velocity;请注意,Materialise包括Velocity。

要删除它,您可以这样做:

$("header").load("master.html", function () { 
    delete jQuery.Velocity;
    jQuery.getScript("materialize.js");
});

然后,在调试窗口中没有消息apear。你问我:“性能?用于销毁和实例化$ .Velocity”我回答:“我不知道”