单击的 asp.net 按钮如何打开 jQuery 对话框，然后单击“是”时恢复默认设置？

Question

我有一个 jQuery 对话框和一个 asp.net 按钮（删除）。单击删除按钮时，我希望对话框打开一个确认窗口，显示“您确定要删除此记录吗？”。当用户单击是时，我想恢复 asp.net 回发。到目前为止，这是我的代码：

   $("#dialog-delete").dialog({
        autoOpen: false,
        height: 200,
        width: 400,
        modal: true,
        resizable: false,
        buttons: {
            'Cancel': function () {
                $(this).dialog('close');
            },
            'Yes': function () {
                $(this).dialog('close');
                //__doPostBack('ctl00$cp1$btnDelete','');
            }
        },
        open: function () {
            $(":button:contains('Yes')").addClass("red");
        }
    });
     $("[id*=btnDelete]").live('click', function (e) {
        e.preventDefault();
        $("#dialog-delete").dialog('open');
     });

所以我使用 preventDefault 停止回发，对话框打开并显示消息，但如果不对删除按钮进行硬编码，我无法触发删除，这很讨厌。无论如何我可以在对话框显示时暂停点击事件并在取消时调用 preventDefault 并在是时恢复？

Answer 1

您可以将实时事件类型更改为 mouseup 而不是 click，然后使用 click 事件来触发回发。

$("[id*=btnDelete]").live('mouseup', function (e) { ...

...

$("[id*=btnDelete]").click();

编辑（基于 cmets）

另一个想法，您可以坚持处理点击事件的原始想法，并在确认删除后调用.die() 函数来删除先前附加的实时事件处理程序，使您能够调用.click() 并导致回发.

你可以像这样调用 .die() 函数：

$("#dialog-delete").dialog({
    autoOpen: false,
    height: 200,
    width: 400,
    modal: true,
    resizable: false,
    buttons: {
        'Cancel': function () {
            $(this).dialog('close');
        },
        'Yes': function () {
            $(this).dialog('close');
            $("[id*=btnDelete]").die('click');
            $("[id*=btnDelete]").click();
        }
    },
    open: function () {
        $(":button:contains('Yes')").addClass("red");
    }
});

 $("[id*=btnDelete]").live('click', function (e) {
    e.preventDefault();
    $("#dialog-delete").dialog('open');
 });

Answer 2

单击相应按钮时提交 ASP.NET 表单。

...
buttons: {
      'Cancel': function () {
           $(this).dialog('close');
       },
       'Yes': function () {
           $(this).dialog('close');
           $('#aspnetForm').submit();   // you may need to use a different selector based on your form name
       }
   }

Answer 3

我得到了这个工作，但到目前为止我不喜欢这个解决方案。我更喜欢更简洁的解决方案，如果可能的话，我可以在按钮单击时捕获事件并将其以某种方式传递到我的对话框中。所以我坚持下去，希望有人有更好的答案。我让它工作的代码（现在）是：

$("#dialog-delete").dialog({
    autoOpen: false,
    height: 200,
    width: 400,
    modal: true,
    resizable: false,
    buttons: {
        'Cancel': function () {
            $(this).dialog('close');
        },
        'Yes': function () {
            $(this).dialog('close');
            $("[id*=btnDelete]")[0].click();
            //__doPostBack('ctl00$cp1$btnVoid','');
        }
    },
    open: function () {
        $(":button:contains('Yes')").addClass("red");
    }
});
 $("[id*=btnDelete]").live('mousedown', function (e) {
    e.preventDefault();
    $("#dialog-delete").dialog('open');
 });

基于上述@jdavies 的帮助（以及我的 cmets 以增强答案）。我将按钮处理程序更改为 mousedown 事件并在 Yes 按钮处理程序中触发 click 事件。

我想知道如果用户通过键盘触发按钮会发生什么，这也是我觉得恶心的部分原因。 :)

坚持争取更好的东西，但至少它正在运行......