jQuery HTML 包括停止 JQuery 工作答案

【问题标题】：jQuery HTML include stopping JQuery workingjQuery HTML 包括停止 JQuery 工作
【发布时间】：2018-09-27 11:29:54
【问题描述】：

抱歉，如果这是一个重复的问题，但我找不到与我遇到的这个特定问题相关的任何内容。

所以我想做的是将 HTML 文件包含到另一个 HTML 文件中。我希望调用 header.html 和 footer.html 以提高效率。

我通常会使用 PHP 执行此操作，但我希望保留所有客户端，因为计划是在混合应用程序中使用 HTML 以在用户测试中测试原型，所以我希望它全部独立。

我发现下面的 jQuery 代码引入了页眉和页脚，这在 HTML 和 CSS 方面效果很好，但我的问题是管理使用 jQuery 的菜单的操作不再起作用。当所有代码都在同一页面上时，它们可以正常工作。

    <!DOCTYPE html>
    <html>
        <head>
            <script src="jquery.min.js"></script>
            <script>
                $(document).ready(function(){   
                    $('#content').load("new.html");
                });
            </script>
        </head>
        <body>
            <div id="content"></div>
        </body>
    </html>

我目前在 Mac 上使用我的本地主机，但我也在我的服务器上尝试过。

我也找到了这些链接，但没有运气

How to include an HTML file with jQuery?

jQuery .load() call doesn't execute JavaScript in loaded HTML file

https://github.com/LexmarkWeb/csi.js

所有的结果都是一样的，内容加载没有问题，但操作不起作用。没有显示错误。

还有一些额外的 JS 文件在本地调用，我使用的是 Materialize 框架。

  <!--  Scripts-->
  <script src="js/jquery-2.1.1.min.js"></script>
  <script src="js/materialize.js"></script>
  <script src="js/init.js"></script>    
  <script type="application/javascript">   
        $(".dropdown-trigger").dropdown();
  </script>

物化https://materializecss.com/bin/materialize.js

这是 init.js 中的文件

(function($){
  $(function(){
    $('.sidenav').sidenav();
  }); // end of document ready
})(jQuery); // end of jQuery name space

我不知所措，因为我可以在开发者控制台中看到任何内容，我已在 http://spudatron.net/test/html-include/ 此处上传了代码示例以帮助了解我的设置。

如果有人能提供帮助，我将不胜感激。

【问题讨论】：

您很可能需要在加载回调中重新初始化 js（即加载完成时）
能否提供new.html的内容
感谢 Pete 的回复，您有我如何做到这一点的示例吗？
api.jquery.com/load/#load-url-data-complete 或在 SO：stackoverflow.com/questions/9899066/… 和 stackoverflow.com/questions/8812970/…
嗨@irsha____D，如果有帮助，我在这里上传了一个示例spudatron.net/test/html-include。示例中的 3 个文件 spudatron.net/test/html-include/index.html、spudatron.net/test/html-include/header.html、spudatron.net/test/html-include/footer.html

标签： jquery html include

【解决方案1】：

如果我理解正确，您是否将init.js 文件包含在“主”html 文件 (index.html) 中？在这种情况下，$('.sidenav').sidenav(); 很可能在实际的 .sidenav 元素出现在 DOM 之前执行（因为它们是异步加载的）。

我的建议是使用$.load 的onComplete 回调处理程序，例如：

$('#content').load("new.html", function () {
    $('.sidenav').sidenav();
});

这将在new.html 的内容加载后运行$('.sidenav').sidenav();（您很可能希望将new.html 替换为header.html 和#content 与您想要放置导航的任何位置）。

【讨论】：

感谢@makku，效果很好，非常感谢。感谢 Ussaid Iqbal、pete 和 irsha____D 的意见，我正在考虑您的建议，但以上内容让我得到了整理。

【解决方案2】：

好吧，你为什么不试试delegate的方法，只要修改你的js里面的点击事件。

$(object).on('click touchend', dynamic object selector, function(){});

我想它会解决问题。

【讨论】：