将打开jquery对话框，其中包含新旧内容

When clicking to open a dialog box, it displays the old and new content. If I add $(this).dialog("destroy"); then I cannot open the dialog box at all. Please let me know how not to show the old content.

单击以打开对话框时，它将显示旧内容和新内容。如果我添加$（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>

2 个解决方案

#1

Just add a content holder, and change that content on the captured click event like this:

只需添加内容持有者，并在捕获的点击事件上更改该内容，如下所示：

//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>

#2

This happens because you missed the closing bracket ); in your code. The proper snippet is:

这是因为你错过了结束括号）;在你的代码中。正确的片段是：

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

I made a JSFiddle to demonstrate that it works.

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

JSFiddle

的jsfiddle

#1