materializecss 滑出效果随着 JQuery load() 而停止答案

【问题标题】：materializecss slide-out effect stops with JQuery load()materializecss 滑出效果随着 JQuery load() 而停止
【发布时间】：2015-07-21 13:58:03
【问题描述】：

我正在使用 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 属性/属性有关，但我找不到太多关于它的信息。

有人遇到过这个问题吗？你是怎么解决的？

【问题讨论】：

jQuery 的 load() 方法仅在包含后缀选择器表达式（例如，load("master.html #header");）的情况下在执行之前剥离脚本。这意味着，只要您在没有该表达式的情况下加载，正如您指定的那样，脚本将在它们被删除之前执行。假设“master.html”的内容一致且正确，则问题出在其他地方。有关讨论和调试帮助，请参阅 stackoverflow.com/a/6037060/603369

标签： jquery html css materialize

【解决方案1】：

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

为了解决这个问题，我将调用更改为：

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

这允许在对其进行任何工作之前加载文件。更多信息：http://api.jquery.com/load/

【讨论】：

【解决方案2】：

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

我做什么？当需要加载html时，我再加载materialize css：

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

有效！但是...在调试控制台中显示此消息：Velocity 已加载。您可能会再次不必要地导入 Velocity；请注意，Materialize 包括 Velocity。

要删除它，您可以这样做：

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

然后，调试窗口中不会出现任何消息。你问我：“性能？用于销毁和实例化 $.Velocity”我回答：“我不知道”

【讨论】：