the old dialog opens with the new dialog

Hi I am using jquery dialog box,and when I am selecting a record from atable, it call the dialog box, then when I close it and chose another record, it opens the old dialog with the new dialog... what is the problem

$(document).ready(function () {
    $("#btnenterpat").click(function () {
        $("#enter_payment").dialog('open');
    });
    $("#enter_payment").dialog({
        autoOpen: false,
        resizable: false,
        modal: true,
        width: 400,
        height: 300,
        buttons: {
            Cancel: function () {
                $(this).dialog('close');
            },
            ok: function () {
                retur_dialog = 'ok';
                $(this).dialog('close'开发者_如何转开发);
            },
        },
        beforeClose: function () {
            if (retur_dialog == 'ok') {
                $.ajax({
                    url: 'ssssssss.php',
                    data: {
                        pm1: $("#pm1").val(),
                        pm2: $("#pm2").val(),
                        pm3: $("#pm3").val(),
                        pm4: $("#pm4").val(),
                        pm5: $("#pm5").val(),
                        pm6: $("#pm6").val(),
                        pm7: $("#pm7").val(),
                    },

                });
            }
        }
    });
});

EDIT:

First page:

<?php
    include ("angela_test.php")
?>
<div style="font-size:12px;">
</div>
<br />
<table id="tbl_angela_test_data"></table>
<div id="p_angela_test_data"></div>
<script type="text/javascript">
$(document).ready(function(){
    var selected_id;
    var colCap = Array();
    var colDef = Array();
    var grp_filter = 0;

      $.ajax({
         url: "getColDefs.php" ,
         data: {table: "bk_accounts", userid: "5", groupid: "1"},
         dataType: "json",
         async: false,
         success: function (data) {
                colCap = data[0];
                colDef = data[1];
         }
      });

    var cols = '';
    for(i=0; i<colDef.length; i++) {
        cols += colDef[i].name;
        if (i != (colDef.length-1)) {
            cols += ';';
        }
    }

    jQuery("#tbl_angela_test_data").jqGrid({
        url:'admin/angela_test_table_get.php',  
        postData: {columns: cols},
        datatype: 'json',
        mtype: 'POST',
        height: 'auto',
        width: 'auto',
        rowNum: 20,
        rowList: [10,20,30],
        colNames: colCap,
        colModel: colDef,
        pager: "#p_angela_test_data",
        viewrecords: true,
        toolbar: [true, 'both'],
        caption: "angela_test",
        onSelectRow: function(id){
            selected_id = id;
            $("#angela_test_del_bnt, #angela_test_edit_bnt").attr("disabled", false);
            }
    });
    jQuery("#tbl_angela_test_data").setGridWidth(500);

    $("#t_tbl_angela_test_data").height(40);
    $("#t_tbl_angela_test_data").append('<button id="angela_test_edit_bnt" style="height:30px; width:100px;" disabled="true">Edit</button>');


    // edit button
    $("#angela_test_edit_bnt").click(function(){
        var rw = '#angela_test_item_'+selected_id;
        var maintab = $("#tabs");
        if ($(rw).html() != null) {
            maintab.tabs('select',rw);
        } else {
            maintab.tabs('add',rw,'Edit form');
           $(rw, '#tabs').load('admin/angelatest.php?id='+selected_id);
        }
    });


//////////////////////////////
})
</script>

and the second page is:

<?php
 include_once("angela_test.php"); 
?>
<input type="button" id="btnenterpat" value="Enter Payment">

and the dialog code is:

<script type="text/javascript">

$(document).ready(function () {
    $("#btnenterpat").click(function () {
        $("#angela_test").dialog('open');
    });

    $("#angela_test").dialog({

        autoOpen: false,
        resizable: false,
        modal: true,
        width: 400,
        height: 300,
        buttons: {
            Cancel: function () {
                $(this).dialog('close');
            },
            ok: function () {
                $(this).dialog('close');
            },
        },
    }).parent().find(".ui-dialog-titlebar-close").hide();
});
</script>

<!--Enter Payment windows --> 
<div id="angela_test" ></div>
<!--dialog windows end -->

Calling $('#some-div').dialog('destroy') would restore the #some-div element to its original form before calling $('#some-div').dialog(...). Maybe you can consider doing that upon closing the dialog?