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

Question

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

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

在下面的示例中，有两种弹出确认的方法。 下一个效果很好。 这是一个经典的JavaScript确认对话框。 当我尝试使用jQuery UI对话框时，它显示一个对话框，但允许它运行在OnClick中分配的事件（此处使用Command，但我想没有区别。希望我没有错。）。 该片段取自ASP.NET Repeater控件 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;
     }
   }
  });
}

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

感谢您的提示。

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

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