jQuery ui dialog removes div

Question

I have a table and within the first <td> is a hidden <div>. I want to show the div using a jQuery ui dialog which I have the following code

example tr

<tr>
    <td>
        <div id="subscriberNote" style="display: none;">
            long message text........
        </div>
        long mess...
    </td>   
    <td>
        <a id="notedetails" href="#">View note</a>
    </td>
</tr>

jQuery

function subscriberNotes_onload() {

    $("#subscriber_notes tr").bind("click", function() {

        openDialog(this);

    });

}

function openDialog(row){
    $(row).closest("tr").find("td:eq(0)").find("#subscriberNote").dialog({
        title: "Message",
        modal: true,
        width: 600,
        height: 530,
        buttons: {
            "OK": function () { $(this).dialog("close"); }
        }
    }).show();
}

After the dialog is shown and closed it is removing the hidden div and so has nothing to show until the page is refreshed.

Answer 1

Make the last function like:

function openDialog(row){
    $(row).closest("tr").find("td:eq(0)").find("#subscriberNote").dialog({
        title: "Message",
        modal: true,
        width: 600,
        height: 530,
        buttons: {
            "OK": function () { $(this).dialog("close"); }
        },
        close: function(){ $(this).dialog("destroy")}
    }).show();
}

According to the docs it should revert to its original state.