jQuery Dialog error: "cannot call methods on dialog prior to initialization; attempted to call method 'close'"

Question

我正在尝试使对话框内部的 div 成为对话框的 'close' 按钮，但是在将事件传递给它之后，我收到此错误：无法调用初始化之前对话框的方法；试图调用方法 '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');

    })
    });
}

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

Answer 1

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

buttons: {
    close: someFunction
}

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

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

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

另一方面，如果您不想要 对话框 "close" 按钮但想使用此 custom 按钮，那么不要在对话框按钮中初始化它。在那种情况下，您将在 jQuery UI 对话框初始化之外初始化一个点击处理程序，并且您将引用对话框（not 到 this).类似于：

$("#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>

就我个人而言，我会使用对话框按钮；但是如果你想拥有自己的按钮，你将在 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 外观和很多功能。

希望对您有所帮助。

jQuery Dialog error: "cannot call methods on dialog prior to initialization; attempted to call method 'close'"

jQuery Dialog error: "cannot call methods on dialog prior to initialization; attempted to call method 'close'"

javascript

jquery

jquery-ui