jQuery UI Dialog: Having trouble with events.

jQuery UI Dialog: Having trouble with events.

Hi there! My first post! Kinda new to jQuery and jQuery UI so please bear with me.

I have a little problem using jQuery UI Dialog. Here's the part of my code where i did this:

  1. $().ready(function() {
  2. $('.delete').mousedown(function(){
                wid = $(this).attr("value");
                $("#dialog-2").dialog({
                    bgiframe: true,
                    resizable: false,
                    autoOpen: false,
                    height:140,
                    modal: true,
                    overlay: {
                        backgroundColor: '#000',
                        opacity: 0.5
                    },
                    buttons: {
                        'Delete workload': function() {
                            $.ajax({
                                type: "POST",
                                url: "<?php echo base_url(); ?>"+"/e_log/delete_wrkload",
                                data: "wid="+wid,
                                success: function(msg){
                                }
                            });
                            $(this).dialog('close');
                            $(this).dialog('destroy');
                        },
                        Cancel: function() {
                            $(this).dialog('close');
                            $(this).dialog('destroy');
                        }
                    }
                });
            });





























  3.         $('.delete').mouseup(function(){
                $('#dialog-2').dialog('open');
            });

  4. )};
I want it to initialize the dialog on a mousedown event then open it on mouseup. The problem is that the functions doesn't seem to fire on the first click on the button. It works when I click the button a second time. Perhaps you guys could shed some light into this?