javascript - jQuery UI 对话框重用行为

Question

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

http://jsfiddle.net/rqLqtuj5/2/

<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