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

时间:2019-02-28 00:15:39

标签: jquery

使用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>

如何在第一次单击时获得负载和对话框以触发?

2 个答案:

答案 0 :(得分:0)

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

尝试:

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

答案 1 :(得分:0)

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