jquery how to get the button that has opened the dialog

Question

I have a dialog that is opened by many buttons. How can I know which button has opened that dialog?

$('#dialog').dialog({
  autoOpen: false,
  buttons: {
    "Ok": function() { 
      $(this).dialog("close");
    }, 
    "Cancel": function() { 
      $(this).dialog("close");
    } 
  },
  open: function(event, ui) {
    //HERE ::: how to get an HTML OBJECT TO THE ELEMENT THAT OPENED THE DIALOG
  }
});

This is called by:

$('a').live('click',function(){
  $('#dialog').dialog('open');
});

I want to know which <a> tag has called that dialog. Is this possible?

Thanks!

Answer 1

In your .live() handler you could store a reference to the element that was clicked on using .data(), like this:

$('a').live('click',function(){
  $('#dialog').data('opener', this).dialog('open');
});

Then to get it later you can grab it from $('#dialog').data('opener'), or $.data(this, 'opener') in the case of the open callback (because this refers to the dialog element). For example your open function may look like this:

open: function(event, ui) {
  $(this).html("Hi, I was opened by: " + $.data(this, 'opener').id);
}

This would show the id property of the anchor you clicked on to open the dialog...you can do whatever you want really, $.data(this, 'opener') refers to the <a /> DOM element.

You can give try a demo of this here