jQuery UI 对话框重用行为

Question

每次触发 onchange() 事件时，对话框都会递归地将自身嵌套在一个新层中。我怎样才能避免这种行为。不特定于版本。

<input type=text onchange="popDialog(this)" value="test">
<div style="display:none">
    <p>dialog box</p>
<div>

function popDialog(obj) {
$('div')
    .dialog({
    buttons: {
        'Close': function () {
            $(this).dialog('close');
        }
    }
});}

Answer 1

嘿，我使用 empty() 命令清理 div 来解决这个问题，示例：

function popDialog(obj) {
    $('div').empty();
    $('div').dialog({
        buttons: {
            'Close': function () {
                $(this).dialog('close');
            }
        }
    });
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js"></script>
<p>Change the value in the text box and hit tab ...close the dialog and do it again, and again</p>
<input type=text onchange="popDialog(this)" value="test">
<div style="display:none">
    <p>dialog box</p>
<div>

这种方式更好：JSBIN

Answer 2

第一次在通用 div 选择器上调用 .dialog() 时（即，第一次更改输入字段时），jQuery UI 会去追加到 DOM 一个 div，它是 input 元素的兄弟。现在，再次更改输入字段，jQuery UI 搜索要调用 .dialog() 的 div，并找到它在第一个之后创建的 div调用并将其变成一个对话框。正如您可能看到的那样，这个过程会无限期地继续下去。

解决方案是将特定的 class 或 id 分配给要调用 .dialog() 的 div，然后使用该 class 或 id 作为调用 .dialog().

时的选择器

jQuery UI 对话框重用行为

jQuery UI Dialog Reuse Behavior

javascript

jquery

jquery-ui-dialog