如何將資料從超連結傳遞到引導模式？

將資料傳遞到 Bootstrap Modal

在 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中文網其他相關文章！