jQuery 对话框错误：“无法在初始化之前调用对话框上的方法；试图调用方法‘关闭’”答案

【问题标题】：jQuery Dialog error: "cannot call methods on dialog prior to initialization; attempted to call method 'close'"jQuery 对话框错误：“无法在初始化之前调用对话框上的方法；试图调用方法‘关闭’”
【发布时间】：2019-10-02 13:08:01
【问题描述】：

我正在尝试使对话框内部的 div 成为对话框的“关闭”按钮，但是在将事件传递给它之后，我收到此错误：在初始化之前无法调用对话框上的方法；试图调用方法'close'

我已经尝试在一个变量中初始化它（使用 var $this = $(this);），但似乎没有什么能摆脱这个错误。

我的 HTML 和 PHP：

<?php

print(

"<div id='dialogBox' class='dialogBox shadow ui-draggable ui-resizable' style='display: block; top:20px;'>".
    "<div id='boxHeader'>".
        "<div id='boxHeaderText'>"._BEANDF_LOG_SELECT. "</div>".
        "<div id='closeBox'>". _BEANDF_CONTROL_CENTER_CLOSE. "</div>".
            "<div style='clear:both'>". 
            "</div>".
    "</div>".
 );
 ?>

jQuery：

function initImpactFactorDialog(){
    $("#opener").click(function() {
        ($("#dialogBox").dialog("isOpen") == false) ? $("#dialogBox").dialog("open") : $("#dialogBox").dialog("close") ;
        });

    $("#dialogBox").dialog({
        autoOpen: false,
        draggable: true,
        width: 700,
        height: 300,
        position:[440,118],
        //buttons

    close: 
        $("#closeBox").click(function() {
        $(this).dialog('close');

    })
    });
}

单击我的自定义按钮时对话框应该关闭。谢谢！

【问题讨论】：

标签： javascript jquery jquery-ui

【解决方案1】：

您错误地分配了close 回调函数。考虑以下几点：

function initImpactFactorDialog() {
  $("#opener").click(function() {
    $("#dialogBox").dialog("open");
  });

  $("#dialogBox").dialog({
    autoOpen: false,
    draggable: true,
    width: 700,
    height: 300,
    position: [440, 118],
    modal: true
  });

  $("#closeBox").button().click(function() {
    $("#dialogBox").dialog("close");
  });
}

initImpactFactorDialog();

<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<button id="opener">Open</button>

<div id='dialogBox' class='dialogBox shadow ui-draggable ui-resizable' style='display: block; top:20px;'>
  <div id='boxHeader'>
    <div id='boxHeaderText'>Log Select</div>
    <div id='closeBox'>Close</div>
    <div style='clear:both'>
    </div>
  </div>
</div>

就个人而言，我会使用对话框按钮；但是，如果您想拥有自己的按钮，您将在分配 dialog 之外分配 click 回调。

现在考虑这段代码：

function initImpactFactorDialog() {
  $("#opener").click(function() {
    $("#dialogBox").dialog("open");
  });

  $("#dialogBox").dialog({
    autoOpen: false,
    classes: {
      "ui-dialog": "ui-widget-shadow dialogBox"
    },
    draggable: true,
    modal: true,
    title: "Log Selection",
    buttons: [{
      text: "Close",
      click: function() {
        $(this).dialog("close");
      }
    }]
  });
}

initImpactFactorDialog();

<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<button id="opener">Open</button>

<div id='dialogBox'>
  <select>
    <option>Log 1</option>
    <option>Log 2</option>
    <option>Log 3</option>
  </select>
</div>

这使用了更少的 HTML，但为您提供了良好的 UI 外观和许多功能。

希望这会有所帮助。

【讨论】：

【解决方案2】：

close 似乎不是an option in jQuery UI Dialog。看起来您打算将其作为 buttons 选项的一部分。结构上更像这样：

buttons: {
    close: someFunction
}

在这一点上，这里的主要区别是function。您没有传递函数，而是立即调用 jQuery 选择器来附加单击处理程序。在该单击处理程序中，您将 被单击的按钮 称为对话框。正如错误告诉您的那样，由于该按钮元素从未初始化为对话框，因此无法关闭。

您不需要手动创建点击处理程序。只需使用 jQuery UI 对话框选项中的处理函数即可：

buttons: {
    close: function () {
        $(this).dialog('close');
    }
}

另一方面，如果您不想要对话框“关闭”按钮但想使用此自定义按钮，那么不要在对话框按钮中初始化它。在这种情况下，您将在 jQuery UI 对话框初始化之外初始化一个单击处理程序，并且您将引用该对话框（not 到 this）。比如：

$("#dialogBox").dialog({
    // your initialization options, without buttons
});

$("#closeBox").click(function() {
    $("#dialogBox").dialog('close');
});

您似乎在混淆这两种方法，仅此而已。

【讨论】：