JQuery UI 对话框显示在页面而不是弹出窗口

Question

我有一个 jqueryUI 对话框弹出，显示在页面上...并在请求时弹出。一些奇怪的功能。 div 中的任何内容都将显示在页面上，并且弹出窗口将正常工作，但是没有 div 上的内容。我正在尝试在文档准备好之前创建弹出窗口。这是我的对象正在运行的代码，在文档准备好之前再次运行。

    var edit_div=document.createElement('div');                 
    var me = this;
    $(edit_div).dialog(
        {
            autoOpen: false,
            height: 400,
            width: 600,
            resizable: false,
            modal: true,
            buttons: 
            {
                "Submit": function() 
                {
                    me.submitForm();
                },
                Cancel: function() 
                {
                    $( this ).dialog( "close" );
                }
            },
            close: function() 
            {
            },

        });

如果我将对话框创建代码移动到单独的函数并在文档准备好时调用它，弹出窗口会正常工作：

$(document).ready(function()
{
   mfg_table.init();
}

以及创建对话框的初始化代码

   this.init = function()
    {
        //alert('initing');
        var me = this;
        $('#' +this.table_id + this.edit_table_name).dialog(
            {
                autoOpen: false,
                height: 400,
                width: 600,
                resizable: false,
                modal: true,
                buttons: 
                {
                    "Submit": function() 
                    {
                        me.submitForm();
                    },
                    Cancel: function() 
                    {
                        $( this ).dialog( "close" );
                    }
                },
                close: function() 
                {
                },

            });
    }

那么为什么我不能在渲染页面之前在 DOM 对象上创建对话框呢？

Answer 1

是否有可能在浏览器加载 jquery.js 文件之前调用了您的脚本？

Document.ready 会等待页面完全加载，然后再运行您的代码。没有它就无法正常工作，这意味着在您尝试运行脚本之前没有加载必要的资源。

您可能想尝试将内联脚本移动到 html 文件的最后，尤其是在引用了所有 .js 和插件文件之后。

我希望我能更具体一些，但是如果没有更多代码或一个实时示例，就很难看出发生了什么。