ASP.NET 按鈕 OnClientClick 中的 jQuery 確認對話框

我在 UpdatePanel 的 GridView 中有一個 TemplateField，帶有一個名為btnDelete. 而不是標准OnClientClick="return confirm('Are you sure?')"我想使用jQuery Dialog。

到目前為止，我能夠使用btnDelete.Attributes["onclick"]和在程式碼隱藏中設置 jQuery 對話框程式碼來設置 jQuery。但是，在我有機會點擊“確認”或“取消”之前，它在所有情況下都會發回伺服器。

這是它生成的 HTML：

<input type="submit" rel="Are you sure?" class="action-link delete" id="ctl00_c1_gvTransfers_ctl02_btnDelete" onclick="return function() { 
           $('#delete-transfer-confirm').dialog({
             buttons: {
               'Confirm' : function() { $(this).dialog('close'); return true; },
               'Cancel'  : function() { $(this).dialog('close'); return false; }
             }
           });

           $('p.message').text($(this).attr('rel'));
           $('#delete-transfer-confirm').dialog('open');
         };" value="Delete" name="ctl00$c1$gvTransfers$ctl02$btnDelete">

我做錯了什麼導致此功能在點擊任一按鈕之前不會阻塞？

相反，標準確認工作得很好：

<input type="submit" class="action-link delete" id="ctl00_c1_gvTransfers_ctl02_btnDelete" onclick="try{if (!window.confirm('Are you sure?')){return false;};}catch(e1){alert("Unexpected Error:\n\n" + e1.toString());return false;};" value="Delete" name="ctl00$c1$gvTransfers$ctl02$btnDelete">

謝謝，馬克

更新：

最終，我不得不使用 UseSubmitBehavior=“false” 來獲取要呈現的 name="" 屬性。然後我不得不重寫 OnClientClick，將值設置為“return;” 所以預設的 __doPostBack() 不會被執行。然後我能夠連接一個 .live() 點擊處理程序，它在確認時呼叫 __doPostBack()：

$('input.delete').live('click', function(e) {
       var btnDelete = $(this);
       alert($(btnDelete).attr('name'));
       e.preventDefault();


       $('#delete-transfer-confirm').dialog({
         buttons: {
           'Confirm': function() {
             $(this).dialog('close');
             __doPostBack($(btnDelete).attr('name'), '');

             return true;
           },
           'Cancel': function() {
             $(this).dialog('close');
             return false;
           }
         }
       });

       $('p.message').text($(this).attr('rel'));
       $('#delete-transfer-confirm').dialog('open');
     });

檢查此問題的選定答案以獲取範例：如何在 Jquery UI 對話框中實現“確認”對話框？

幾點注意事項：

不要將您的 onclick 功能放在 onclick 屬性中。jQuery 的一大好處是它允許您執行 Unobtrusive Javascript。相反，請執行以下操作：

$(function() {
   $('.delete').click(function(e) {
       e.preventDefault() //this will stop the automatic form submission
       //your functionality here
   });
});

此外，請確保您的對話框是在點擊事件之外實例化的，以便在第一次點擊事件發生之前對其進行初始化。因此，您的結果將是這樣的：

$(function() {
    $("#delete-transfer-confirm").dialog({
     autoOpen: false,
     modal: true
   });

   $('.delete').click(function(e) {
       e.preventDefault();
       $('#delete-transfer-confirm').dialog({
           buttons: {
               'Confirm': function() {
                   $(this).dialog('close');
                   return true;
               },
               'Cancel': function() {
                   $(this).dialog('close');
                   return false;
               }
           }
       });

       $('p.message').text($(this).attr('rel'));
       $('#delete-transfer-confirm').dialog('open');
   });
});

那應該對你有用。

引用自：https://stackoverflow.com/questions/4046664