jQuery 动态页面加载 - 其他 javascript 已损坏，我应该如何导入特定于页面的 js？答案

【问题标题】：jQuery dynamic page loading - Other javascript is broken and how should i import page specific js?jQuery 动态页面加载 - 其他 javascript 已损坏，我应该如何导入特定于页面的 js？
【发布时间】：2016-12-14 22:16:41
【问题描述】：

好的，所以这个会很有趣！

注意：这将适用于运行 sqlite 和 mongoose 的 Windows 桌面应用程序，因此加载时间并不那么重要（对我来说，现在），并且不会连接到非本地服务器。强>

我已经搜索了所有内容，但找不到任何特定于我的情况的内容，大多数似乎加载到 iframe 或使用 css-tricks.com 提供的框架

我正在使用我自己的（分类）框架。我使用的库是 bootstrap 3、jquery 2.1.4、jqueryui 1.12.1 和 Bootstrap-select v1.12.1

index.php 会将所有内容动态加载到 div#wrapper 中，并将充当所有页面加载的头部。这是我的 index.php 的骨架。在 sidebar.html 中，链接具有“pagetoload”属性，jquery 捕获点击事件并将数据加载到 div#wrapper

    <body>
      <?php require_once("res/sidebar.html"); ?>
      <div class="container-fluid" id="body-container">
        <div id="wrapper" style="border:1px black solid;">
           <!-- dynamic page content will be loaded here-->
        </div>
      </div>

      <script src="res/js/jquery.js"></script>
      <script src="res/js/jquery-ui.js"></script>
      <script src="res/js/bootstrap.js"></script>
      <script src="res/js/bootstrap-select.js"></script>
      <script src="res/js/menu-handling.js"></script>



    <script>
    //index.php js
    $(document).ready(function () {

        $.get("home.php", function (data) {
            $("div#wrapper").html(data);
        });


        $("a.loader").click(function (e) {
            e.preventDefault();
            $.get($(this).attr("pagetoload"), function (data) {
                $("div#wrapper").html(data);
            });
        });
        //dateFormat 10/dd/yy to constrain input only to october
        //get current month number and constrain to prevent additions to wrong month
        $("#date-input").datepicker({
            dateFormat: "12/dd/yy"
            , constrainInput: true
        });
        $("#date-input").focus(function () {
            $(this).datepicker("show");
        });

    });
</script>
</body>

理想情况下，将动态加载的每个页面都包含最少的 php，并且只包含该页面所需的 html/css/js。我的问题是，例如，在加载一个页面（例如我的 dbviewer.php （其中包含 js 并给我异步加载警告）并将 home.php 重新加载到容器中之后，javascript 不再起作用。每个页面的 javascript 都是内联标签。

我尝试将每个动态页面的所有 javascript 堆积到 index.php 中，以便在启动时全部加载，但出现的问题是它仍然无法正常工作。在使每个页面模块化的同时使这种动态加载工作的最佳方法是什么。我曾尝试对此进行研究，但只出现了使用 hashTag 之类的东西。

如果您需要我的文件中的更多代码，请张贴，我想我已经解释了足够让您理解，因为 index.php 之外没有什么太疯狂的事情，只是每个动态页面中的脚本，基本上与使用 jquery 的 dom 元素。

【问题讨论】：

您的应用是 SPA，单页应用，在这种情况下，我建议您在“主”index 页面中加载所有 javascript，然后为每个附加页面简单地执行 @ 987654323@ 请求你的 php 文件，就是这样！
您遇到的问题不是如何重新排列应用程序和php文件，而是javascript/jQuery回调编程，或者在X页面上拉一些数据后如何进行一些JS/数据操作，，我说的对吗？
我已经尝试让 index.php 加载所有 js 和任何 js，例如显示动态表单以插入到 db 如果我这样做，但如果 js 与页面内联，它会起作用。
从菜单重新加载回'home'后，将动态加载home.php任何js，例如bootstrap drop down，datepicker，或任何其他js被破坏
您必须将 master 文件中的所有 javascript、css 资产分开以在第一次页面加载时托管它们，以及所有其他文件不加载任何 duoble 相同的 javascript，因为它们肯定会发生冲突，，对于您拥有的所有 php 文件，您必须将它们构造为仅用于该页面用户选择的数据。之后，您必须在加载数据后触发 $.ajax callback 函数在该页面上执行工作..

标签： javascript jquery dynamic loading

【解决方案1】：

我留下这个答案是因为它对您有所帮助，并且对于任何可能发现自己处于类似情况的开发人员来说，作为一般经验法则也是有用的。

因此，在开发应用程序时，您必须将主文件中的所有 javascript、css 资产分开，以便在第一次页面加载时托管它们。（也许它的性能更好）

您拥有的所有其他服务器生成的文件（php、node.js 等）文件的结构仅作为用户点击或登陆的页面的数据源......或至少尝试......

之后你必须触发

$.ajax().callback

前端功能在每个页面上完成工作。比如页面效果、数据操作等等。回调很重要，因为那是数据真正加载的时候！

干杯，k

【讨论】：