如何将数据从超链接传递到引导模式？

将数据传递到 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中文网其他相关文章！