私は、JQuery UI Dialog を使用して、この醜い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 (!) も知りません。ユーザーがまだ [はい] を選択した場合に、リンクに従って削除するように、これらの確認ボタンの動作を設定するにはどうすればよいでしょうか。
ベストアンサー1
私も同じ問題を解決する必要がありました。これを機能させるための鍵は、確認機能を使用するリンクのイベント ハンドラー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>
confirmLinkCSS クラス (私の例では )を使用してリンクを生成できる場合は、これが機能すると思います。
がここにありますjsfiddleコードが入っています。
完全な開示のために、私はこの特定の問題に数分を費やし、同様の回答を提供したことを述べておきます。この質問これも当時は受け入れられた答えはありませんでした。