Javascript 全局jQuery对话框变量工作不正常_Javascript_Jquery Ui_Global Variables_Jquery Ui Dialog

Javascript 全局jQuery对话框变量工作不正常

javascript jquery-ui

Javascript 全局jQuery对话框变量工作不正常,javascript,jquery-ui,global-variables,jquery-ui-dialog,Javascript,Jquery Ui,Global Variables,Jquery Ui Dialog,当我调用该函数时，对话框不起作用。如果我将对话框结构移动到showtimes_list函数中，一切正常我认为在函数外声明的变量在上下文中是全局的 var dialog_list = $("<div></div>").dialog({ autoOpen: false, modal: true, height: 300, width: 720, }); function showtimes_list(sid){ dialog_list.h

当我调用该函数时，对话框不起作用。如果我将对话框结构移动到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");
}

var dialog\u list=$（“”）。dialog({
自动打开：错误，
莫代尔：是的，
高度：300，宽度：720，
});
函数showtimes\u列表（sid）{
dialog_list.html（“”）；
$.get（“ajax\u showtimes.php？sid=“+sid，函数（数据）{
dialog_list.html（数据）；
}
);
对话框列表。对话框（“打开”）；
}

---编辑---

这是从onClick到showtimes\u列表调用的

---编辑---

这是有效的：

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,
    });    
});

函数showtimes\u列表（sid）{
$（“stl”）对话框（“打开”）；
$（“#stl”）.html（“”）；
$.get（“ajax\u showtimes.php？sid=“+sid，函数（数据）{
$（“#stl”）.html（数据）；
}
);    
}
$（函数（）{
$（“”）.appendTo（document.body）.dialog({
自动打开：错误，
莫代尔：是的，
高度：300，宽度：720，
});    
});

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

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

然后，如果要更改该元素的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，那么应该动态地将它们添加到正文中，并使用类而不是ID

编辑：为了回答您的问题，即当对话框列表在函数之外时，它为什么不工作，我想它与生成的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>

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

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

然后，如果要更改该元素的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，那么应该动态地将它们添加到正文中，并使用类而不是ID

编辑：为了回答您的问题，即当对话框列表在函数之外时，它为什么不工作，我想它与生成的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>

我很困惑。你能详细说明什么不起作用吗？这还不够。是否在document.ready（）函数中调用此函数？或者这只是一个脚本标签？@Pointy打字错误。。很抱歉如果不将变量设置移动到函数中，调用时它将不起作用。是否有关于某种错误的控制台输出，或者尝试使用属性id向html页面添加一个div元素，然后选择该元素作为对话框列表。您确定对话框列表的值在声明位置或单击事件触发时不会被修改吗？有了您编写的代码，

对话框列表

肯定是在

showtimes\u列表

中的上下文中。我很困惑。你能详细说明什么不起作用吗？这还不够。是否在document.ready（）函数中调用此函数？或者这只是一个脚本标签？@Pointy打字错误。。很抱歉如果不将变量设置移动到函数中，调用时它将不起作用。是否有关于某种错误的控制台输出，或者尝试使用属性id向html页面添加一个div元素，然后选择该元素作为对话框列表。您确定对话框列表的值在声明位置或单击事件触发时不会被修改吗？有了您编写的代码，

对话框列表

肯定是在

showtimes\u列表

的上下文中。