关闭动态创建的jQuery-ui对话框

Question

我正在创建一个用户信息编辑对话框，该对话框使用$.post获取编辑用户信息，但是由于没有使用任何HTML元素初始化对话框，因此无法关闭此对话框。

我正在尝试$('#editUser').dialog('close')但是它不起作用。

这是主体：

<div id='userInfo'>
<div class='user'>
    <span class='userId'>1</span>
    <span class='userName'>John</span>
</div>
<div class='user'>
    <span class='userId'>2</span>
    <span class='userName'>Jane</span>
</div>

这是用于创建对话框的脚本：

$(function() {
$('.user').click(function() {
     var uid = $(this).find('span.userId').html();
    $post('/e-val/user/edit.php', {id: uid}, function(html) {
       $(html).dialog();
    });
});

$('body').on('click', '#closeEditDialog', function() {
   $('#editUser').dialog('close')
});
});

对话框可以按预期正常打开，但没有按预期关闭。

这是ajax脚本返回的对话框的HTML。

<div id='editUser'>
<table>
    <tr>
        <td>Username</td>
        <td><?php echo $user['name'] ?></td>
    </tr>
    <tr>
        <td>Email</td>
        <td><?php echo $user['email'] ?></td>
    </tr>
    <tr>
        <td colspan='2'>
<input type='button' id='closeEditDialog' value='close' />
</td>
    </tr>
</table>
</div>

我该怎么做才能关闭它？ 我可以使用$('#editUser').remove()删除对话框，但是我需要关闭它而不是删除它。

Answer 1

var mydialog;
$(function() {
$('.user').click(function() {
     var uid = $(this).find('span.userId').html();
    $post('/e-val/user/edit.php', {id: uid}, function(html) {
       mydialog = $(html);
       mydialog.appendTo('body');
       mydialog.dialog();
    });
});

$('body').on('click', '#closeEditDialog', function() {
   mydialog.dialog('close')
});
});

Answer 2

在创建对话框之前，您可能需要将该html插入到DOM中。

$("body").append(html);
$("#editUser").dialog();

好吧，至少如果您的对话框以这种方式显示，没有什么阻止它关闭的，您使用的是相同的选择器。

编辑

另外，不要忘记.dialog（）将初始化小部件，请尝试不要多次调用它。 改用.dialog（“ open”）。

最好甚至将已经将对话框的div添加到您的html中，然后在其中附加服务器端代码以动态更新对话框的内容。

Answer 3

$('#editUser').dialog('close')无法使用，因为您从未使用$('#editUser')初始化dialog ，因此您不能使用它来关闭它，您需要使用用于创建它的同一处理程序。

正如Gil＆Trinh回答的那样：只需先将对话框内容添加到DOM中，然后初始化对话框即可：

$post('/e-val/user/edit.php', {id: uid}, function(html) {
   $(html).appendTo('body');
   $('#editUser').dialog( {autoOpen: false} );
});

autoOpen: false将阻止对话框自行打开，可以随时使用$('#editUser').dialog('open') 。