jQuery如何获取打开对话框的按钮

Question

我有一个对话框，由许多按钮打开。如何知道哪个按钮打开了该对话框？

$('#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
  }
});

这个被调用的函数是：

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

我想知道是哪个标签调用了该对话框。这是可能的吗？

谢谢！

- trrrrrrm

---

我编辑了问题，朋友，请检查一下。我发布了调用此对话框的代码。感谢您抽出时间来查看我的问题。 - trrrrrrm

Answer 1

在你的.live()处理程序中，你可以使用.data()存储被点击元素的引用，像这样：

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

接着，你可以通过$('#dialog').data('opener')获取它，或者在open回调函数中使用$.data(this, 'opener')（因为this指的是对话框元素）。例如，你的open函数可能如下所示：

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

这会显示您单击以打开对话框的锚点的 id 属性...您可以随心所欲，$.data(this, 'opener') 引用 <a /> DOM 元素。

您可以在此处尝试演示

- Nick Craver

---

.live()函数现已被弃用，jQuery现在推荐使用.on方法。 - Matt

Answer 2

假设你有一个像这样的按钮：

<input type="button" class="mybuttons" value="Click Me"/>

还有一些类似于CSS的内容：

.openerclass
{
  background-color: red;
}

点击时添加该类

$(function()
{
    var myevent;
    $(".mybuttons").click(function(event){
       myevent = $(event.target); 
       $(".selector").dialog("open");
    });

    $(".selector" ).dialog({
       open: function(event, ui) { 
       var opener = $(event.target);
       myevent.addClass("openerclass");
       alert(myevent.nodeName);
       ... }
    });
});

编辑：修复语法错误并添加另一个示例以使其更清晰。

编辑2：原始内容有误（在某种程度上），因为打开器事件与单击事件无关。修改为正确使用单击事件。

- Mark Schultheiss

Answer 3

你可以给它一个ID：

$('a').live('click',function(){
      $('#dialogTrigger').removeAttr('id');
      $(this).attr('id', 'dialogTrigger');
      $('#dialog').dialog('open');
}

open: function(event, ui) {
     // do something with $('#dialogTrigger')
}

- Mark

Answer 4

您可以将$(this)分配给变量，如me，并稍后使用它：

$(".locked").on('click',function unlock(){ 
    var me = $(this);

buttons: { 
       "Yes": function() {  
           me.removeAttr('disabled').removeClass('locked');  
       }

- mheg