ハイパーリンクからブートストラップ モーダルにデータを渡すにはどうすればよいですか?

ブートストラップ モーダルへのデータの受け渡し

Web 開発では、要素間でデータを受け渡す機能は、対話型アプリケーションにとって非常に重要です。 Bootstrap モーダル ポップアップでは、ハイパーリンクを開いたときに、ハイパーリンクからモーダルにデータを転送する必要があるシナリオが発生する場合があります。この記事では、これをシームレスに実現するプロセスについて説明します。

一意の ID を持つハイパーリンクがある状況を考えてみましょう。これらのリンクをクリックすると、モーダルが開き、対応する ID が入力されます。これを実現するには、HTML および JavaScript コードを次のように変更します。

HTML:

<a data-toggle="modal" data-id="@book.Id" title="Add this item" class="open-AddBookDialog">></a>

<div class="modal hide">

JavaScript:

$(".open-AddBookDialog").click(function () {
    $('#bookId').val($(this).data('id'));
    $('#addBookDialog').modal('show');
});

ただし、上記のアプローチを使用しても、望ましい結果が得られない可能性があります。この問題を解決するには、jQuery のより堅牢な .on イベント ハンドラーの使用を検討してください。

$(document).on("click", ".open-AddBookDialog", function () {
     var myBookId = $(this).data('id');
     $(".modal-body #bookId").val( myBookId );
     // It is unnecessary to manually call the modal.
});

この更新された JavaScript コードにより、モーダルが開かれたときにデータがハイパーリンクからモーダルの非表示の入力フィールドに正しく渡されるようになります。 jQuery の .on イベント ハンドラーを利用することで、イベントを動的にキャプチャして処理し、以前に発生した問題を解決できます。

以上がハイパーリンクからブートストラップ モーダルにデータを渡すにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。