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

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

本文关键字：按钮 专用 程序 事件处理 对话框 UI jQuery      更新时间：2023-09-26

是否有一种方法可以连接到jQuery UI对话框上的关闭（x）按钮，以便提供专用的事件处理程序？使用"关闭"或"关闭前"事件是不起作用的，因为如果对话框中有其他按钮也会导致对话框关闭，那么您总是会碰到"关闭"answers"关闭后"事件，这是不可取的。我想要一种从关闭（x）按钮运行特定代码的方法。

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

如果您想绝对确定它是标题栏中的关闭按钮，那么您可以检查event.originalEvent.target，然后使用.closest()检查类或DOM位置。

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

您可以尝试：

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

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

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

FIDDLE

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

尽管这个线程很旧，但我仍然会在这里添加我的解决方案，希望能让其他搜索它的人受益

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链接：

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

相关文章：