asp.net 上的 jQuery UI 模式确认对话框：如何防止触发 OnClick 事件

Question

我正在尝试使用来自jQuery UI 的确认对话框。

我遇到了这个问题：如何正确触发对话框，同时防止在按钮处触发 OnClick 事件，直到用户单击对话框中的“是”或“否”按钮？

在下面的示例中，有两种弹出确认的方法。下一个 效果很好。这是一个经典的 JavaScript 确认对话框。当我尝试使用 jQuery UI 对话框时，它会显示一个对话框，但允许它运行在 OnClick 分配的事件（这里使用命令，但我想没有区别。希望我没有错。）。该作品取自ASP.NET Repeater control btw。

<li>
   <asp:LinkButton ID="lbtnRenew" runat="server" Text="Renew" CssClass="ContextMenuItem"
  CommandName="Renew" CommandArgument="<%# Container.ItemIndex %>" 
  OnClientClick="javascript: openModalDiv('dialogRenew');" /></li>
<li>
   <asp:LinkButton ID="lbtnRemove" runat="server" Text="Remove" CssClass="ContextMenuItem"
  CommandName="Remove" CommandArgument="<%# Container.ItemIndex %>" 
  OnClientClick="return confirm('Are you sure that you want to delete package?');" /></li>

这是我目前使用的 JavaScript：

function openModalDiv(divname) {
  $('#' + divname).dialog({
    bgiframe: true,
    resizable: false,
    modal: true,
    overlay: {
    backgroundColor: '#000',
    opacity: 0.5
    },
    buttons: {
     Ok: function() {
       $(this).dialog('close');return true;
     },
     Cancel: function() {
       $(this).dialog('close');return false;
     }
   }
  });
}

我错过了一些东西，但不知道是什么。我该如何解决这个问题？

感谢任何提示。

附：如果您需要添加一些其他信息，请告诉我。

Answer 1

您需要配置您的模态对话框，然后在 document.ready 处理程序中附加一个 onclick 事件处理程序。此外，由于您使用的是 asp.net 服务器控件，因此 html 中生成的 id 将包含命名容器，因此您将无法使用上面提到的 #lbtnRenew 选择器进行选择。实际生成的 ID 类似于 ctl00_...lbtnRenew。您可以使用备用 jquery 选择器来获取 id 或名称的最后一部分，如下所示

    $(function() {
  // configure modal dialog
$('#dialogRenew').dialog({
    bgiframe: true,
    resizable: false,
    modal: true,
    autoOpen: false,
    overlay: {
    backgroundColor: '#000',
    opacity: 0.5
    },
    buttons: {
     Ok: function() {
       $(this).dialog('close');return true;
     },
     Cancel: function() {
       $(this).dialog('close');return false;
     }
   }
  });

// attach onclick event handler to open dialog
// $= selector for elements with attribute ending in text
$("submit[name$=lbtnRenew]").click(function(event) {
        event.preventDefault();
        $('#dialogRenew').dialog('open');
    });
});

然后您可以删除链接按钮的 onclientclick 内联 javascript

Answer 2

去掉onClientClick，使用jQuery添加事件，就可以使用preventDefault...

$("#lbtnRenew").click(function(e) {
e.preventDefault(); //stops OnClick event
//jscript code here
});