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

Posted 2023-05-08

【中文标题】jQuery-UI .dialog("moveToTop") 即使成功运行也会引发错误

【英文标题】：jQuery-UI .dialog("moveToTop") is throwing an error even though it worked successfully

【发布时间】：2019-08-30 21:26:57

【问题描述】：

我在打开 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 版本，但错误仍然存​​在。

【参考方案1】：

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

错误消息说«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;
);

【讨论】：

一开始我也认为这是一个排序问题，但我尝试在各种地方以不同的顺序调用 moveToTop，虽然我没有收到任何错误，但对话框不会移动到顶部。在您上面的版本中，我的对话框最终出现在菜单 div 和覆盖层后面，因此在将其附加到表单之前先打开对话框似乎至关重要。

我对“菜单 div”一无所知...但似乎您附加对话框的位置已经是 z-indexed。当父级已经有 z-index 时，子级 z-index 将被忽略。所以也许它是你附加它的地方，问题......此外：为什么还要附加它？ $("#popDialog") 似乎已经在 DOM 中了，对吧？

现在看来真正的罪魁祸首是与菜单的 css 冲突，虽然我还没有具体弄清楚是什么。如果我将表单标签包裹在菜单和内容 div 周围，则对 MoveToTop 的需求就会消失，并且对话框会出现在覆盖层上方。然而，这可能会在稍后回来咬我，因为内容 div 包含可能包含自己的表单的 Razor 视图。对话框被附加到表单中，以便它们上的提交按钮可以工作。我可能会将 JS 附加到它们以提交正确的表单。谢谢你的帮助。我将继续解决问题。

【参考方案2】：

建议对此进行测试：

$("#btnOpenDialog").click(function (e) 
  e.preventDefault();
  var tmpdlg = $("#popDialog").dialog(
    modal: true,
    autoOpen: false,
    width: 530,
    height: 520,
    title: "Template Picker"
  ).dialog('open').dialog('moveToTop');

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

根据错误，jQuery 似乎不知道它已经被初始化为对话框。这可能与代码执行过快有关。链接代码可能有助于组织它。

如果您打算在包含许多对象 ($(".ui-front")) 的 jQuery 对象上执行它，您可能会遇到一些将它们全部置于“顶部”的问题：

moveToTop()

将对话框移动到对话框堆栈的顶部。

还要注意查找已初始化的对象，例如 ".ui-front.ui-dialog"。

最好更新您的帖子并包含 HTML 内容的示例。目前尚不清楚您可能有多少对话。

【讨论】：

感谢您抽出宝贵时间查看此内容。我已经尝试了上面的建议，但是当 moveToTop() 触发时错误仍然出现。我还注意到 moveToTop 似乎将对话框与其附加的表单分离，因此即使它已移到前面，提交按钮也不再起作用。解决方法是将 #contentform 放在 contentdiv 之外，然后对话框与叠加层位于相同的堆叠上下文中，这意味着调用 MoveToTop() 的需要消失了。我会尝试将其发布为答案。

【参考方案3】：

感谢所有建议。我注意到，当 moveToTop() 实际上确实将对话框移到前面时（但出现 js 错误），它似乎将对话框与附加到的表单分离，因此提交按钮无论如何都不再起作用。事实证明，我正在使用的导航菜单的 css 也有一个覆盖 div，它干扰了堆叠上下文。

我的解决方法是将#contentform 放在#contentdiv 之外，然后附加的对话框与叠加层位于相同的堆叠上下文中，这意味着调用MoveToTop() 的需要消失了。必须将#contentdiv 放入每个剃刀视图而不是将其放在主布局文件中，这很麻烦，但这似乎是必要的。

我的猜测是，MoveToTop() 不喜欢对话框一开始就没有处于正确的堆叠上下文中的事实，所以我对它的使用不正确。