Question

我目前使用的设计中有基页（顶部和左侧的菜单），所有内容页面都可以在需要时简单地加载到容器div中。

这非常适合我希望网站流动的方式，但是当将页面加载到div中时，大约20％的时间，jQuery插件（例如datetimepicker，checktree等）都不起作用，例如，＆＃39; $（...）。datetimepicker未定义＆＃39;。

为什么会这样？有没有办法让它更一致？所有必要的JS和CSS文件都包含在内，所以我不确定为什么有时插件随机无法工作。

供参考，这是页面加载功能：

function loadNewPage(page) {
    $("#maindiv").html("<center><img src='../assets/images/loading.gif'></center>");
    $.get(page, function(data) {
        $("#maindiv").html(data);
        window.scrollTo(0,0);
    });
}

以下是加载到div中的一个页面上的示例加载函数：

jQuery(document).ready(function($) {
    $('#beginDate').datepicker({ dateFormat: 'yy-mm-dd'});
    $('#endDate').datepicker({ dateFormat: 'yy-mm-dd'});

    $('#datatable').dataTable(
        {
            "sPaginationType": "full_numbers",
            "order": [20, 'desc'],
            "search": {
                "smart": false
            }
        }
    );
});

正如我所说，通常这一切都很好。但是，偶尔（并且看似随机）会弹出未定义的错误。这并不会阻止页面上的所有功能，我可以使用＆＃39; loadNewPage＆＃39;再次加载页面。函数和jQuery插件可以再次工作。（但随机不运作）

Answer 1

您收到随机错误，因为在加载异步内容之前触发了文档就绪事件（使用插件库）。

通常，您在主页上加载所有库脚本（jQuery，插件等）。加载这些文件后，浏览器会发出ready事件。然后任何动态内容都可以立即使用这些库。

<script src="jquery.js"></script>
<script src="plugin.js"></script>    

<script>
    $(document).ready(function() {
        // script libraries are loaded

        $.get(url, function(data) {
            // target element is loaded
            $("#dynamic").html(data);
            $("#target").plugin();
        });

    });
</script>

<div id="dynamic"></div>

使用动态内容加载库的问题是您需要等待库完成加载然后执行该内容的任何脚本 - 竞争条件。

装载AJAX的<div>中的jQuery插件

1 个答案: