时间戳

首页 > 解决方案 > jQuery-UI .dialog("moveToTop") 即使成功运行也会引发错误

jquery - jQuery-UI .dialog("moveToTop") 即使成功运行也会引发错误

问题描述

在我打开 Jquery 对话框后，我在调用 dialog("moveToTop") 时遇到问题。我之所以这么称呼它是因为我的模态对话框出现在叠加层下（它们需要附加到与叠加层不同的堆叠上下文中的特定表单）并且所有尝试手动强制 z-index各种元素都没有奏效。使叠加层不可见是不可接受的。

我希望在打开的任何 jquery-ui 对话框上调用 .dialog("moveToTop") ：

    $(document).on("dialogopen", ".ui-front", function (event, ui) {

        $(document).dialog("moveToTop");

    });

这似乎有效。我的对话框现在位于叠加层之上。但我在控制台中收到此错误：

  Uncaught Error: cannot call methods on dialog prior to initialization;
 attempted to call method 'moveToTop'
    at Function.error (jquery-1.10.2.min.js:21)
    at HTMLDocument.<anonymous> (jquery-ui.min.js:6)
    at Function.each (jquery-1.10.2.min.js:21)
    at init.each (jquery-1.10.2.min.js:21)
    at init.t.fn.(:52727/anonymous function) [as dialog] (http://localhost:52727/scripts/jquery-ui/jquery-ui.min.js:6:5357)
    at HTMLDivElement.<anonymous> (cmsfunctions.js:79)
    at HTMLDocument.dispatch (jquery-1.10.2.min.js:22)
    at HTMLDocument.v.handle (jquery-1.10.2.min.js:22)
    at Object.trigger (jquery-1.10.2.min.js:22)
    at HTMLDivElement.<anonymous> (jquery-1.10.2.min.js:22)
error @ jquery-1.10.2.min.js:21
(anonymous) @ jquery-ui.min.js:6
each @ jquery-1.10.2.min.js:21
each @ jquery-1.10.2.min.js:21
t.fn.(anonymous function) @ jquery-ui.min.js:6
(anonymous) @ cmsfunctions.js:79
dispatch @ jquery-1.10.2.min.js:22
v.handle @ jquery-1.10.2.min.js:22
trigger @ jquery-1.10.2.min.js:22
(anonymous) @ jquery-1.10.2.min.js:22
each @ jquery-1.10.2.min.js:21
each @ jquery-1.10.2.min.js:21
trigger @ jquery-1.10.2.min.js:22
_trigger @ jquery-ui.min.js:6
open @ jquery-ui.min.js:10
(anonymous) @ jquery-ui.min.js:6
(anonymous) @ jquery-ui.min.js:6
each @ jquery-1.10.2.min.js:21
each @ jquery-1.10.2.min.js:21
t.fn.(anonymous function) @ jquery-ui.min.js:6
(anonymous) @ cmsfunctions.js:110
dispatch @ jquery-1.10.2.min.js:22
v.handle @ jquery-1.10.2.min.js:22

以下代码根本不会将对话框移动到叠加层之上：

$("#btnOpenDialog").click(function () {

        var tmpdlg = $("#popDialog").dialog({
            modal: true,
            autoOpen: false,
            width: 530,
            height: 520,
            title: "Template Picker"

        });
        $('#popDialog').dialog('moveToTop');
        $('#popDialog').dialog('open');

        tmpdlg.parent().appendTo(jQuery("form#contentform"));

        // prevent the default button action
        return false;
    });

我尝试将事件侦听器仅附加到特定对话框，但什么也没有发生。当我使用本文开头的代码时，该对话框仅出现在叠加层上方。谁能解释错误的含义？我的代码是否在未初始化的对话框上循环？如果是这样，我怎样才能使其更具体并仍然获得预期的结果？

我将 jquery-ui 1.10.2 与 jquery 3.3.1 一起使用。我也尝试换成较低的 jquery 版本，但错误仍然存​​在。

标签： jqueryjquery-uijquery-ui-dialog

解决方案

也许问题只是关于订单......

错误信息说«cannot call methods on dialog before initialization» ...
所以如果你先打开它，应该没问题。

试试下面的内容：

$("#btnOpenDialog").click(function () {

  var tmpdlg = $("#popDialog").dialog({
      modal: true,
      autoOpen: false,
      width: 530,
      height: 520,
      title: "Template Picker"

  });

  // Append
  tmpdlg.parent().appendTo(jQuery("form#contentform"));

  // Open
  $('#popDialog').dialog('open');

  // Mov to top
  $('#popDialog').dialog('moveToTop');

  // prevent the default button action
  return false;
});

推荐阅读