Question

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

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

在下面的示例中，有两种方法可以弹出确认。降低一个效果很好。这是一个经典的JavaScript确认对话框。当我尝试使用jQuery UI对话框时，它会显示一个对话框但允许它运行在OnClick上分配的事件（这里使用Command，但我认为没有区别。希望我没有错。）。这件作品取自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;
     }
   }
  });
}

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

感谢任何提示。

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

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

然后你可以删除你的linkbutton

的onclientclick内联javascript

Answer 2

删除onClientClick并使用jQuery添加事件，然后你可以使用preventDefault ...

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

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

2 个答案: