如何在Jquery UI对话框中实现“确认”对话框？

Xandy 发表于 Dev

168

Xandy

我尝试使用JQuery UI对话框替换丑陋的javascript:alert()框。在我的场景中，我有一个项目列表，在每个项目旁边，我将为每个项目都具有一个“删除”按钮。伪html设置如下：

<ul>
    <li>ITEM <a href="url/to/remove"> <span>$itemId</span>
    <li>ITEM <a href="url/to/remove"><span>$itemId</span>
    <li>ITEM <a href="url/to/remove"><span>$itemId</span>
</ul>

<div id="confirmDialog">Are you sure?</div>

在JQ部分中，在准备好文档后，我首先将div设置为带有必要按钮的模式对话框，然后将要触发的那些“ a”设置为确认，然后将其删除，例如：

$("ul li a").click(function() {
  // Show the dialog    
  return false; // to prevent the browser actually following the links!
}

好，这是问题所在。在初始化期间，对话框将不知道是谁（项目）启动它，也不知道项目ID（！）。我如何设置这些确认按钮的行为，以便在用户仍然选择“是”的情况下，将通过链接将其删除？

保罗·莫里

我只需要解决同样的问题。使其生效的关键在于，dialog必须在click事件处理程序中为要与之一起使用确认功能的链接进行部分初始化（如果要对多个链接使用此链接）。这是因为该链接的目标URL必须注入到事件处理程序中，以便单击确认按钮。我使用CSS类来指示哪些链接应具有确认行为。

这是我的解决方案，摘录为适合示例。

<div id="dialog" title="Confirmation Required">
  Are you sure about this?
</div>

<script type="text/javascript">
  $(document).ready(function() {
    $("#dialog").dialog({
      autoOpen: false,
      modal: true
    });
  });

  $(".confirmLink").click(function(e) {
    e.preventDefault();
    var targetUrl = $(this).attr("href");

    $("#dialog").dialog({
      buttons : {
        "Confirm" : function() {
          window.location.href = targetUrl;
        },
        "Cancel" : function() {
          $(this).dialog("close");
        }
      }
    });

    $("#dialog").dialog("open");
  });
</script>

<a class="confirmLink" href="http://someLinkWhichRequiresConfirmation.com">Click here</a>
<a class="confirmLink" href="http://anotherSensitiveLink">Or, you could click here</a>

我相信，如果您可以使用CSS类（confirmLink在我的示例中）生成链接，则对您有用。

这是其中包含代码的jsfiddle。

在充分披露的利益，我会注意到，我花在这方面的问题了几分钟，我提供了一个类似的答案，这个问题，这也是没有当时是一个公认的答案。

本文收集自互联网，转载请注明来源。

如有侵权，请联系 [email protected] 删除。