Script within a jQueryUI modal dialog box only works once

Question

I have a table that, when any row is clicked, launches a jQueryUI modal dialog box to allow users to edit that record. I use the following script which seems to work, successfully loading the relevant record's details in using AJAX:

$("#datatbl tr").bind('click', function() {        
        var url = 'item_edit.asp?id='+$(this).attr("data-myid");
        var dialog = $('<div style="display:hidden" title="Record details:"></div>').appendTo('body');
        // load remote content
        dialog.load(
            url, 
            {},
            function (responseText, textStatus, XMLHttpRequest) {
                dialog.dialog({         
                    height: 440,
                    width: 550,
                    autoOpen: false,
                    modal: true,
                    buttons: {
                        "Update this record": function() {
                         $('#editform').submit();
                            },
                        Cancel: function() {
                        $( this ).dialog( "close" );
                        }
                    }
        });
        dialog.dialog('open');
            }
        );
        //prevent the browser to follow the link
        return false;
});

It works ok the first time I click on a record, but if I click cancel and try to edit another record, the dialog box does appear (with the correct record details) however, no scripts within the dialog box work - eg: there's a jqueryUI datepicker input and some validation.

There are no javascript errors and, from my limited understanding of FireBug, I can't spot anything going wrong so I would appreciate some advice how to proceed, thanks!

For future reference, I added an ID to the DIV created in 'var dialog' and removed it in the Cancel function:

Cancel: function() {
                        $( this ).dialog( "close" );
                        $('#dialogbox').remove();
                        }

I'd still appreciate if anybody suggests a better way to handle this behaviour.

Answer 1

I fixed it: the DIV created for the dialog box doesn't get destroyed when the box closes.

I added an ID to the DIV created in 'var dialog' and removed the DIV in the Cancel function:

Cancel: function() {
                        $( this ).dialog( "close" );
                        $('#dialogbox').remove();
                        }

Answer 2

You can create the dialog at one time only, not on every load of its content, just set the autoOpen to false.

<div id="dialog">
    <div id="content" style="display:hidden" title="Record details:"></div>
</div>

$('#dialog').dialog({
    height: 440,
    width: 550,
    autoOpen: false,
    modal: true,
    buttons: {
        "Update this record": function() {
            $('#editform').submit();
        },
        Cancel: function() {
            $( this ).dialog( "close" );
        }
    }
});
$("#datatbl tr").bind('click', function() {        
    var url = 'item_edit.asp?id='+$(this).attr("data-myid");
    // load remote content
    $('#content').load(url);
    $('#dialog').dialog('open');
    return false;
}};