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

目标

我有一个带有项目表的网页.每个项目旁边都有一个删除按钮.单击该按钮时,我想

>要求用户确认
>从数据库中删除相应的项目
>从列表中删除该项目的行

当前解决方案

现在,我正在做这样的事情：

$('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()引用将获取正确的行…

有更简单的方法吗？

解决方法:

我做这样的事情：

        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
            });
        }

然后从click事件中调用我的函数.

标签：javascript,jquery-ui-dialog
来源： https://codeday.me/bug/20190622/1259510.html