Bagaimana untuk Menghantar Data daripada Hiperpautan ke Modal Bootstrap?

Mengirim Data ke Modal Bootstrap

Dalam pembangunan web, keupayaan untuk menghantar data antara elemen adalah penting untuk aplikasi interaktif. Dengan tetingkap timbul modal Bootstrap, anda mungkin menghadapi senario di mana anda perlu memindahkan data daripada hiperpautan ke modal apabila ia dibuka. Artikel ini akan membimbing anda melalui proses untuk mencapai ini dengan lancar.

Pertimbangkan situasi di mana anda mempunyai hiperpautan dengan ID unik. Apabila diklik, pautan ini harus membuka modal dan mengisinya dengan ID yang sepadan. Untuk mencapai ini, anda boleh mengubah suai kod HTML dan JavaScript seperti berikut:

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');
});

Walau bagaimanapun, menggunakan pendekatan di atas mungkin tidak membuahkan hasil yang diingini. Untuk menyelesaikan isu ini, pertimbangkan untuk menggunakan pengendali acara .on jQuery yang lebih mantap:

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

Kod JavaScript yang dikemas kini ini memastikan bahawa data dihantar dengan betul daripada hiperpautan ke medan input tersembunyi modal apabila modal dibuka. Dengan menggunakan pengendali acara .on jQuery, anda boleh menangkap dan mengendalikan acara secara dinamik, menyelesaikan isu-isu sebelumnya yang dihadapi.

Atas ialah kandungan terperinci Bagaimana untuk Menghantar Data daripada Hiperpautan ke Modal Bootstrap?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!