jQuery 对话框未在加载回调中打开答案

【问题标题】：jQuery dialog not opening in load callbackjQuery 对话框未在加载回调中打开
【发布时间】：2019-02-28 00:15:39
【问题描述】：

使用 jQuery 1.12.4 和 jQuery mobile 1.3.0

我正在尝试将外部 html 加载到现有页面上的 div 中并在新对话框中打开它。我所拥有的内容会加载内容并显示对话框，但前提是我单击两次。第一次单击是加载内容，但在我再次单击之前不会启动对话框。

我已经进行了广泛的搜索，但我不知道为什么它不会在第一次点击时完成所有搜索。

jQuery:

$(document).ready(function() {
  $("#returnLabel").click(function() {
    $("#ticketArea").load("URL", function() {
      $(this).dialog({
        position: {
          my: "center",
          at: "top"
        },
        width: "1120px",
        resizable: false,
        draggable: false,
        modal: true,
        title: "Return Label",
        dialogClass: "ticket",
      });
    });
  });
});

点击目标：

<li><a href="#" id="returnLabel">Return Label</a></li>

目标 div：

<div id="ticketArea" data-enhance="false" style="display: none;"></div>

如何在第一次点击时同时触发加载和对话框？

【问题讨论】：

标签： jquery

【解决方案1】：

$("#ticketArea") 标记中有 style="display: none;"...

试试：

//...
  $("#ticketArea").load("URL", function() {
      $(this).show().dialog({
        //..

【讨论】：

此解决方案使 div 与内容一起出现，但不加载对话框。
删除 display:none 并将对话框更改为在 click 函数内部的加载之后并与加载分开，但最终对我有用。没有你的帮助，我不会想到display:none，谢谢！

【解决方案2】：

从 div 中删除 style='display: none' 并更改脚本顶部，这对我有用：

$(document).ready(function() {
            $("#returnLabel").click(function() {
                $("#ticketArea").load("/sites/memberservices/omni/Site%20Assets/Custom%20Forms/Return%20Label2.html");
                $('#ticketArea').dialog({
                            position: {
                                my: "top",
                                at: "top"
                            },
                            width: "1120px",
                            resizable: false,
                            draggable: false,
                            modal: true,
                            title: "Return Label",
                            dialogClass: "ticket",
                        });
            });
        });

【讨论】：