jquery 包含新旧内容的对话框打开

Question

点击打开对话框时，显示新旧内容。如果我添加 $(this).dialog("destroy"); 那么我根本无法打开对话框。请告诉我如何不显示旧内容。

<script>
//display dialog box
$("#dialog-message").dialog({
    autoOpen: false,
    modal: false,
    draggable: true,
    resizable: true,
    show: 'blind',
    hide: 'blind',
    width: 900,
    dialogClass: 'ui-dialog-osx',
    buttons: {
        "I've read and understand this": function() {
            $(this).dialog("close");
        }
    }
});

//click to open dialog box
$("#test").click(function() {
    $( "#dialog-message" ).dialog( "open" );
}
</script>

<p id="test">test</p>
<div id="dialog-message" title="Important information">
<form>  </form>
</div>

Answer 1

发生这种情况是因为您在代码中遗漏了右括号 );。正确的片段是：

//click to open dialog box
$("#test").click(function() {
    $( "#dialog-message" ).dialog( "open" );
});

我制作了一个 JSFiddle 来证明它有效。

JSFiddle

Answer 2

只需添加一个内容容器，然后在捕获的点击事件中更改该内容，如下所示：

//display dialog box
$("#dialog-message").dialog({
    autoOpen: false,
    modal: false,
    draggable: true,
    resizable: true,
    show: 'blind',
    hide: 'blind',
    width: 400,
    dialogClass: 'ui-dialog-osx',
    buttons: {
        "I've read and understand this": function() {
            $(this).dialog("close");
        }
    }
});

//click to open dialog box
$("#old-content").click(function() {
    $('#dialog-message .content').text('This is the old content');
    $('#dialog-message').dialog('open');
});

$("#new-content").click(function() {
    $('#dialog-message .content').text("Some new content");
    $('#dialog-message').dialog('open');
});

<link rel="stylesheet" type="text/css" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/themes/smoothness/jquery-ui.css">
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>

<button id="old-content">Old content</button>
<button id="new-content">New content</button>
<div id="dialog-message" title="Important information">
  <div class="content"></div>
</div>

jquery 包含新旧内容的对话框打开

jquery Dialog box opens with old and new content

jquery

dialog

jquery-ui-dialog