Создать пользовательскую кнопку закрытия jQuery UI

Question

Здесь есть несколько ответов относительно этого вопроса или одного подобного - они либо устарели, либо неточны.

Я пытаюсь добавить свой собственный закрывающий элемент в диалоговое окно jQuery UI. Я предполагаю, что мне нужно либо использовать делегированный обработчик, либо иметь возможность отвечать на какое-то событие, вызванное функцией диалога.

Очевидно, $ (document) .ready () не будет работать, потому что диалоговое окно происходит после загрузки документа.

Итак, как это сделать? Я уверен, что упускаю что-то довольно простое. (с надеждой) Ссылка: https://api.jqueryui.com/dialog

Пока что получаемые отзывы предполагают, что есть элемент, к которому я могу прикрепить обработчик событий ... Он НЕ существует в момент запуска сценария для рассматриваемой страницы

Это работает КОГДА и только когда я запускаю его из окна отладки с открытым диалоговым окном. Когда я помещаю эту простую команду в скрипт, прикрепленный к странице ... ничего не прикрепляется Команда, которую я использовал в этом примере, очень очень проста

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

Answer 1

Нашел решение. Напомним, я выполняю команду, которая выглядит следующим образом:

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

Логика и механика того, как это работает, объясняется (несколько) здесь

Проблема в том, что в каждом примере и предложении предполагалось, что элемент 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 ) {} );

Разница в том, что событие не связано с несуществующим селектором (именно эту проблему я пытался объяснить. Вместо этого оно связано с $ (документ).

Надеюсь, это поможет кому-то избежать дней проб и ошибок

Answer 2

Пока не ясно, что вы хотите, и вы не привели ни одного примера.Вот базовый пример диалога из https://jqueryui.com/dialog/

Сначала мы инициализируем диалог.После этого мы можем использовать метод виджета для работы с оберткой.Мы можем выбрать конкретный элемент из виджета и затем изменить его, если захотим.

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

Надежда, которая помогает.