创建自定义jQuery UI关闭按钮

Question

此处有多个关于此问题或类似问题的答复-它们过时或不准确。

我正在尝试将自己的自定义close元素添加到jQuery UI对话框。 我猜我需要使用委托的处理程序或能够响应对话框函数引发的某些事件。

显然$（document）.ready（）不起作用，因为对话框在加载文档后发生。

所以-该怎么做？我确定我缺少一些简单的东西。 （希望） 参考：https://api.jqueryui.com/dialog

到目前为止，我得到的反馈是假定存在可以在其上附加事件处理程序的元素...在针对相关页面运行脚本时不存在

仅当我在打开对话框的情况下从调试窗口运行该命令时，该命令才起作用。当我将该简单命令放入页面所附的脚本中时...没有任何附件 我在此示例中使用的命令非常简单

jQuery( ".name-group-name" ).click(function() {
  console.log('hello');
});

Answer 1

目前尚不清楚您想要什么，您也没有提供示例。这是https://jqueryui.com/dialog/

中的基本对话框示例

首先，我们初始化对话框。完成后，我们可以使用widget method处理包装器。我们可以从小部件中选择特定元素，然后根据需要进行更改。

$(function() {
  var dlg = $("#dialog").dialog();
  var dlgClose = dlg.dialog("widget").find(".ui-dialog-titlebar-close");
  console.log(dlgClose);
  var newButton = $("<button>", {
    class: "ui-dialog-titlebar-close"
  }).html("Close").button().click(function() {
    dlg.dialog("close");
  });
  dlgClose.replaceWith(newButton);
});

<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>

<div id="dialog" title="Basic dialog">
  <p>This is the default dialog which is useful for displaying information. The dialog window can be moved, resized and closed with the 'x' icon.</p>
</div>

如果只想更改图标，则可以找到<span>并删除当前的ui-icon-closethick类，然后添加自己的类。如果要替换元素，则可能需要将新的click事件绑定到该元素。

您现在可以看到该元素：

<button class="ui-dialog-titlebar-close ui-button ui-corner-all ui-widget">Close</button>

希望有帮助。

Answer 2

找到了解决方案。 回顾一下，我正在执行如下命令：

<a href="/admin/config/development/sync/diff/block.block.bartik.search" class="use-ajax" data-accepts="application/vnd.drupal-modal">Show me a modal</a>

对此进行了解释的逻辑和机理（有点） here

问题在于每个示例和建议都假定jQuery Dialog元素是使用我的代码显式创建的。事实并非如此。如果没有以下内容，提供的解决方案将无法正常工作。

不知何故，我们必须听事件。这样完成：

// catch dialog event
$(document).on("dialogopen", ".ui-dialog", function (event, ui) {
    //Do some work here
});

非常接近jQuery API参考中的代码示例：

$( ".selector" ).on( "dialogopen", function( event, ui ) {} );

区别在于事件不绑定到不存在的选择器（这正是我试图解释的问题。相反，它绑定到$（document）。

希望这可以避免其他人反复试验