[jQuery] Dynamic Dialog Question

Below is the snippet of code:

                $('.extra_dialog_link').click(function() {
                        event.preventDefault();
                        var data = this.id.replace('cn_', "");
                        //alert(data);
                        $('.dialog_extra').dialog('open');
                        $(".dialog_extra").dialog({
                                autoOpen: false,
                                width: 500,
                                modal: true,
                                resizable: false,
                                draggable: false,
                        }).load('data.php?cn='+data).show();
                });

Everything works but one minor glitch.  The only way to dynamically
show the dialog box you need to click on the link twice.  After you
successfully click on a link twice every subsequent link only needs to
be clicked once.

I tried to get the remove the $('.dialog_extra').dialog('open'); but
then the dialog box won't pop up.  To me that is redundant have the $
('.dialog_extra').dialog('open'); and the $(".dialog_extra").dialog
({ .... but I am stumped.

Any insight would be greatly appreciated thank you in advance.