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＆amp; Trinh：只需先将对话框内容添加到DOM中，然后初始化对话框：

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

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

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

3 个答案: