jquery - 如何在 Jquery UI 对话框中实现 "confirmation"对话框？

Question

我正在尝试使用 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(!)。我如何设置这些确认按钮的行为，以便在用户仍然选择"is"的情况下，它会按照链接将其删除？

Answer 1

我只需要解决同样的问题。让它工作的关键是 dialog 必须在 click 事件处理程序中部分初始化，以用于要使用确认功能的链接(如果你想将其用于多个链接)。这是因为链接的目标 URL 必须注入(inject)到确认按钮单击的事件处理程序中。我使用了一个 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里面有代码。

为了全面披露，我会注意到我在这个特定问题上花了几分钟时间，并提供了与 this question 类似的答案。 ，当时也没有公认的答案。