为何调用按钮时jQuery UI Dialog的close方法无法生效？

我通过代码添加了显示文本为“Add”的按钮，希望点击该按钮能关闭对话框，因此给按钮绑定了hey()函数。虽然Firefox调试器显示hey()函数已经被调用，但对话框始终无法关闭。代码如下：

function dialog(type) {
    $(".dialog").dialog({
      resizable: true,
      height: 800,
      width: 800,
      modal: true,
      open: function () { 
        $(this).load('../SearchPage/search_page.jsp', function () {
            setDialogType(type); 
            $("h3").not(".header").append('<button onClick="hey()" style="background-color:green; color:white">Add</button>');  
      });   
      }, 
    }); 
} 

function hey() {
    $(".ui-dialog-content").dialog("close");
}

问题分析与修复方案 #

问题根源 #

$(".ui-dialog-content")可能匹配多个元素，无法精准定位到当前要关闭的对话框实例；另外，通过内联onClick绑定事件的方式，容易出现上下文绑定问题。

修复方案1：使用对话框实例直接关闭（推荐） #

在open回调中保存当前对话框的实例，给按钮绑定点击事件时直接调用该实例的close方法，确保操作的是当前打开的对话框：

function dialog(type) {
    $(".dialog").dialog({
      resizable: true,
      height: 800,
      width: 800,
      modal: true,
      open: function () { 
        var currentDialog = $(this); // 保存当前对话框实例
        currentDialog.load('../SearchPage/search_page.jsp', function () {
            setDialogType(type); 
            // 添加按钮并绑定点击事件
            $("h3").not(".header").append('<button style="background-color:green; color:white">Add</button>')
              .find('button:last')
              .on('click', function() {
                currentDialog.dialog("close");
              });  
        });   
      }, 
    }); 
}

修复方案2：优化全局函数的选择器 #

如果要保留全局的hey()函数，可以通过:visible选择器精准定位当前可见的对话框：

function hey() {
    $(".ui-dialog-content:visible").dialog("close");
}

注意：如果同时打开多个对话框，这种方式可能会关闭错误的对话框，不如方案1可靠。

额外优化建议 #

尽量避免使用内联onClick绑定事件，改用jQuery的.on()方法，这是更规范的事件绑定方式，能有效避免上下文丢失问题。

内容的提问来源于stack exchange，提问作者Tim