javascript - 如何将元素传递给 jQuery UI 对话框？

Question

目标

我有一个包含项目表的网页。每个项目旁边都有一个删除按钮。单击该按钮时，我想

• 请用户确认
• 从数据库中删除相应的条目
• 从列表中删除该项目的行

当前解决方案

现在，我正在做这样的事情:

$('button.delete').click(function(){
  thisRow = $(this).parent();
  itemID = $(this).parent().attr('id');
  if (confirm('Are you sure?')){
   $.post('/manage_items.php', {"action":"delete", "itemid":itemID}, function(){
     thisRow.hide("slow").remove();
   });
  } 
}

此解决方案之所以有效，是因为每个 button.delete 都可以确定它属于哪一行和哪一项，并据此采取行动。

所需的解决方案

我不想使用笨重的“确定或取消”警告框，而是使用 jQuery UI 对话框。但我不确定如何让对话框知道在任何给定的点击时它应该处理哪一行和哪一项。

设置方法如下:

1)定义一个对话框div

<div class="dialogbox" id="confirmdeleteitem" title="Really DELETE this item?">
   <p>Gee golly, are you s-s-s-sure you want to do that?!</p>
</div>

2) 设置对话框行为

$('#cofirmdeleteitem').dialog({
    //other options - not relevant here
    buttons: {
        "Nevermind": function() {
            //do nothing
        },
        "Alright! Woo!": function(){
            //do something
        }
    }
});

3) 设置打开对话框的点击事件

$('button.delete').click(function(){
    $('#confirmdeleteitem').dialog('open');    
});

在这最后一步中，我希望能够将一些信息传递给对话框 - 例如，单击了哪个删除按钮。但我看不到这样做的方法。

我可以在前面的每个项目行中插入一个隐藏对话框 div.dialog，或者在单击其按钮后将一个隐藏对话框插入到特定行中。然后 $(this).parent() 引用将获取正确的行...

有更简单的方法吗？

Answer 1

我做这样的事情:

        function ConfirmationDialog(title, question, options) {
            var d = $('<div title="' + title + '"><p><span class="ui-icon ui-icon-alert" style="float:left; margin:0 7px 20px 0;"></span>' + question + '</p></div>');
            d.dialog({
                bgiframe: true,
                resizable: false,
                height: 190,
                width: 350,
                modal: true,
                overlay: {
                    backgroundColor: '#000',
                    opacity: 0.5
                },
                buttons: options
            });
        }

然后从点击事件中调用我的函数。