javascript jQuery UI 对话框中关闭 (x) 按钮的专用事件处理程序

Dedicated event handler for close (x) button in jQuery UI Dialog

提问by Brian David Berman

Is there a way to wire into the close (x) button on a jQuery UI Dialog, such that you can provide a dedicated event handler? Using the "close" or "beforeclose" event does not work because if you have other buttons in your dialog that also cause the dialog to close, you are always going to hit the "close" and "beforeclose" events, which is not desirable. I want a way to run specific code from the close (x) button.

有没有办法连接到 jQuery UI 对话框上的关闭 (x) 按钮，以便您可以提供专用的事件处理程序？使用“close”或“beforeclose”事件不起作用，因为如果你的对话框中有其他按钮也会导致对话框关闭，你总是会点击“close”和“beforeclose”事件，这是不可取的. 我想要一种从关闭 (x) 按钮运行特定代码的方法。

回答by Scott González

Whenever one event leads to another event inside a jQuery UI widget, the original event is always included in the event object. In this case, you can look at the event object passed to the closecallback or the dialogcloseevent and check if event.originalEventexists. If it does, then you can assume that the dialog was closed via a click on the close button. This also applies to beforeclose.

每当一个事件导致 jQuery UI 小部件内的另一个事件时，原始事件始终包含在事件对象中。在这种情况下，您可以查看传递给close回调或dialogclose事件的事件对象并检查是否event.originalEvent存在。如果是这样，那么您可以假设该对话框是通过单击关闭按钮关闭的。这也适用于beforeclose.

If you want to be absolutely sure that it was the close button in the titlebar, then you can check event.originalEvent.targetand either check the class or the DOM location using .closest().

如果您想绝对确定它是标题栏中的关闭按钮，那么您可以event.originalEvent.target使用.closest().

Here's a jsbin showing this in action: http://jsbin.com/ajoheWAB/1/edit

这是一个 jsbin，显示了这一点：http://jsbin.com/ajoheWAB/1/edit

回答by A. Wolff

You could try:

你可以试试：

$(document).on('click','.ui-dialog-titlebar-close',function(){
    //close button clicked
});

回答by Dan-Nolan

As far as I know there's no way to wire directly to that button, but you can do something specific to your popup by adding a dialogClass and wiring an event handler yourself:

据我所知，无法直接连接到该按钮，但是您可以通过添加 dialogClass 并自己连接事件处理程序来执行特定于弹出窗口的操作：

var dialogClass ="yourPopupTitle";

$(document).on('click', '.'+ dialogClass  +' .ui-dialog-titlebar-close', function() { 
    handleEvent();
});

FIDDLE

小提琴

回答by Joe

I believe this is the solution you are looking for - you will need to unbind the click event and re-bind your custom handler to it.

我相信这是您正在寻找的解决方案 - 您需要解除单击事件的绑定并将您的自定义处理程序重新绑定到它。

Although this thread is old, I'd still add my solution here with a hope to benefit others who search for it.

虽然这个帖子很旧，但我仍然会在这里添加我的解决方案，希望能让其他搜索它的人受益。

var fnCustomerHandler = function() {
    alert("Here is your custom handler...");  
};

$( "#dialog" ).dialog({
        open: function(event, ui) {
            var el = $(this).closest('.ui-dialog').find('.ui-dialog-titlebar-close');
            el.off();
            el.on("click", fnCustomerHandler);
        }
    }
);

Fiddle link:

小提琴链接：

http://jsfiddle.net/morefool/n82649d5/

http://jsfiddle.net/morefool/n82649d5/