[解決済み] Jquery UIダイアログで「確認」ダイアログを実装するには？

質問

JQuery UI Dialogを使用して、醜いダイアログを置き換えようとしています。 javascript:alert() ボックスを使用します。 私のシナリオでは、アイテムのリストがあり、それらの個々の横に、それらのそれぞれについて "delete"ボタンを持つことになります。 psuedo 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!
}

OK、ここで問題です。開始時に、ダイアログは誰（アイテム）がそれを起動するのか、また、アイテムID（！）もわかりません。もし、ユーザーがYESを選択した場合、それを削除するためのリンクに従うように、これらの確認ボタンの動作を設定するにはどうすればよいでしょうか？

解決方法は？

私もちょうど同じ問題を解決する必要がありました。 これを動作させるのに重要だったのは 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 というコードが入っています。

完全な開示のために、私はこの特定の問題に数分を費やし、私は同様の答えを提供したことを記しておきます。 この質問 も、当時は回答がなかった。