Question

当我调用该函数时，该对话框不起作用。如果我将对话框结构移动到showtimes_list函数中，一切正常。

我认为在函数外声明的变量在上下文中是全局的吗？

var dialog_list = $("<div></div>").dialog({
    autoOpen: false,
    modal: true,
    height: 300, width: 720,
});

function showtimes_list(sid){
    dialog_list.html("");
    $.get("ajax_showtimes.php?sid="+sid, function(data){
            dialog_list.html(data);
        }
    );

    dialog_list.dialog("open");
}

--- ---编辑

这是从onClick到showtimes_list调用的。

--- ---编辑

这是有效的：

function showtimes_list(sid){
    $("#stl").dialog("open");
    $("#stl").html("");
    $.get("ajax_showtimes.php?sid="+sid, function(data){
            $("#stl").html(data);
        }
    );    
}

$(function(){
    $('<div id="stl"></div>').appendTo(document.body).dialog({
        autoOpen: false,
        modal: true,
        height: 300, width: 720,
    });    
});

Answer 1

不是创建新的空div，而是将div添加到文档中，例如：

<body>
   <div id="dialog">
      <div id="dialogContent"></div>
   </div>
</body>

然后，您的脚本将变为

var dialog_list = $("#dialog").dialog({ });

然后，当您想要更改该元素的HTML时，您需要更改dialogContent元素，而不是更改对话框本身：

function showtimes_list(sid){    
     var content = $("#dialogContent");
     content.html("");
    $.get("ajax_showtimes.php?sid="+sid, function(data){
            content.html(data);
        }
    );

    dialog_list.dialog("open");
}

如果你不想在HTML结构中使用这些空div，你应该动态地将它们添加到body中并使用类而不是id。

编辑：回答你的问题，当dialog_list在函数之外时，为什么它不起作用，我想它与生成的html有关。

当你调用.dialog（）时，jQuery会生成以下HTML：

<div class="ui-dialog ui-widget ui-widget-content ui-corner-all ui-draggable ui-resizable">
   <div class="ui-dialog-titlebar ui-widget-header ui-corner-all ui-helper-clearfix">
      <span id="ui-dialog-title-dialog" class="ui-dialog-title">Dialog title</span>
      <a class="ui-dialog-titlebar-close ui-corner-all" href="#"><span class="ui-icon ui-icon-closethick">close</span></a>
   </div>
   <div style="height: 200px; min-height: 109px; width: auto;" class="ui-dialog-content ui-widget-content" id="dialog">
      <p>Dialog content goes here.</p>
   </div>
</div>

当它在你的函数之外时，只要在脚本中遇到它就会被调用...然后，在你的函数中，你改变生成的HTML。我动态更新对话框内容已经有一段时间了，但我遇到了同样的问题，生成的HTML是罪魁祸首。我认为我的解决方案是，而不是原始答案中的嵌套div，我创建了对话框（在函数外部），在函数内部，您更改了ui-dialog-content

的html

例如：

function showtimes_list(sid){
    dialog_list.find('.ui-dialog-content').html("");
    $.get("ajax_showtimes.php?sid="+sid, function(data){
            dialog_list.find('.ui-dialog-content').html(data);
        }
    );

    dialog_list.dialog("open");
}

全局jQuery对话框变量无法正常工作

1 个答案: