Rumah > hujung hadapan web > tutorial js > Bagaimana untuk Menghantar Data daripada Hiperpautan ke Modal Bootstrap?

Bagaimana untuk Menghantar Data daripada Hiperpautan ke Modal Bootstrap?

Barbara Streisand
Lepaskan: 2024-12-10 16:52:22
asal
595 orang telah melayarinya

How to Pass Data from a Hyperlink to a Bootstrap Modal?

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">
Salin selepas log masuk

JavaScript:

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

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');
     $(&quot;.modal-body #bookId&quot;).val( myBookId );
     // It is unnecessary to manually call the modal.
});
Salin selepas log masuk

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!

sumber:php.cn
Kenyataan Laman Web ini
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn
Artikel terbaru oleh pengarang
Tutorial Popular
Lagi>
Muat turun terkini
Lagi>
kesan web
Kod sumber laman web
Bahan laman web
Templat hujung hadapan