Heim >Web-Frontend >js-Tutorial >Wie übergebe ich Daten an ein Bootstrap-Modal, wenn ich auf einen Hyperlink klicke?

Wie übergebe ich Daten an ein Bootstrap-Modal, wenn ich auf einen Hyperlink klicke?

Susan Sarandon
Susan SarandonOriginal
2024-12-26 02:55:13295Durchsuche

How to Pass Data to a Bootstrap Modal When Clicking a Hyperlink?

Übergabe von Daten an ein Bootstrap-Modal

Die vorliegende Aufgabe besteht darin, ein Bootstrap-Modal zu öffnen, wenn auf einen Hyperlink geklickt wird, und eine zugehörige ID an das zu übergeben modal. Trotz Versuchen stoßen Benutzer auf ein Problem, bei dem das Modal inaktiv bleibt oder die erforderlichen Daten fehlen.

Lösung

Die Nutzung des .on-Ereignishandlers des jQuery-Frameworks erweist sich als effektiv Verfahren. Betrachten Sie den folgenden Ansatz:

HTML

<a data-toggle="modal" data-id="ISBN564541" title="Add this item">

JavaScript

$(document).on("click", ".open-AddBookDialog", function () {
    var myBookId = $(this).data('id'); // Retrieve the ISBN from the clicked link
    $(".modal-body #bookId").val(myBookId); // Set the input field's value in the modal
    // It is unnecessary to manually call the modal as Bootstrap handles it with data-toggle="modal"

});

Bei diesem Ansatz klicken Sie auf den Hyperlink öffnet sowohl das Modal als auch das Eingabefeld mit der aus dem Link abgerufenen ID. Diese Lösung behebt effektiv das Problem der Übergabe von Daten an das Bootstrap-Modal beim Klicken auf einen Hyperlink.

Das obige ist der detaillierte Inhalt vonWie übergebe ich Daten an ein Bootstrap-Modal, wenn ich auf einen Hyperlink klicke?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Stellungnahme:
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn