how to use event.target in a jquery dialog to change a DIV's innerHTML when it is double clicked?

**UPDATE**

Basically what I'm asking is just this - can someone please explain to me how to use event.target? I need to know what DOM element triggered an event and "do something" to it within that event (namely change a DIV's contents in a jquery dialog). THANK YOU!

OK, I have found some questions/answers that were close to what I'm looking for, but either they were not exactly the same or... I just can't figure out how to apply it to my situation. I'm pretty sure what I need involves "event.target" or something of that nature, but my brain is a little fried right now ;p and I can't make it work. PLEASE HELP! Thank you so, so much

I have a button that opens a dialog when clicked. The dialog has a form. When the form is filled out and the "create" button is clicked, the form closes and a new div is appended to the document body containing the info that was entered. This works perfectly. My problem is this: I want another dialog to open when that new div is double clicked that will allow editing of the info. I haven't even yet tried to include the current info INTO the dialog, I'm working on trying to update the div, and I can't get it to work. I don't know how to pass "this" I guess into the dialog.

How does the dialog know what div opened it and then change that div's innerhtml when the dialog's "Edit" button is clicked?

I have two form dialogs:

<div id="dialog-form" title="Create new element">

<form>
    blah blah blah
    </form>
</div>


<div id="dialog-edit" title="Edit Element">

<form>
blah blah blah
    </form>
</div>

and one button:

<button id="开发者_如何学编程create-element">Create new element</button>

then I have the first (create element) dialog working perfectly:

<script>
$(function() {
   var begin =  '<div class="column">' + 
         '<ol class="sortable">' + 
          '<li>' + 
         '<div ondblclick="onDblClick();">';
   var end =  '</div>' + 
         '</ol>' + 
         '</div>';


    $( "#dialog-form" ).dialog({
        autoOpen: false,
        height: 300,
        width: 350,
        modal: false,
        zIndex:101,
        buttons: {
            "Create Element": function() {

            $( "#body" ).append( begin + ...<some other stuff here>... + end );
             } 

            $( this ).dialog( "close" );


            },
            Cancel: function() {
                $( this ).dialog( "close" );
            }
        },

    });

    $( "#create-element" )
        .button()
        .click(function() {
            $( "#dialog-form" ).dialog( "open" );
        });
});

</script>

when the div is double clicked on:

function onDblClick() {

            $( "#dialog-edit" ).dialog( "open" );
        }

and then there's the "Edit Element" dialog that I don't know how to use to change the innerhtml of the div that was double clicked to open it:

<script>
$(function() {

....variables here....


    $( "#dialog-edit" ).dialog({
        autoOpen: false,
        height: 300,
        width: 350,
        modal: false,
        zIndex:101,
        buttons: {
            "Update Element": function() {

need some way to set target here  =  variable1fromabove + variable2 + etc + etc;


                    $( this ).dialog( "close" );


            },
            Cancel: function() {
                $( this ).dialog( "close" );
            }
        },

    });


});

</script>

I don't really understand what are you trying to do. But I think this could help you some:

$('#dialog').dialog('isOpen')

It will return true/false. So you can use it to check which dialog is open now.