jQuery对话框错误：“初始化之前无法在对话框上调用方法；​​尝试调用方法'close'”

Question

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

我尝试将其初始化为变量（使用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');

    })
    });
}

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

Answer 1

close似乎不是an option in jQuery UI Dialog。您似乎打算成为buttons选项的一部分。在结构上更像这样：

buttons: {
    close: someFunction
}

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

您无需手动创建点击处理程序。只需在jQuery UI对话框选项中使用处理函数：

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

---

另一方面，如果您不希望使用 dialog “关闭”按钮，但想要使用此 custom 按钮，则不要在对话框按钮中对其进行初始化。在这种情况下，您将在jQuery UI对话框初始化之外初始化一个单击处理程序，并引用该对话框（对this来说是 not ）。像这样：

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

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

---

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

Answer 2

您未正确分配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>

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

现在考虑以下代码：

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外观和许多功能。

希望这会有所帮助。