wie man Bootstrap modal Daten-Ziel dynamisch ändern klicken

Question

Ich habe einen Website-Kalender, der ähnlich wie eine Reservierungsanfrage funktioniert. Ich hatte dies in Bootstrap 2x arbeiten, aber die App auf 3.0 konvertiert. Alles scheint zu funktionieren, aber ich versuche herauszufinden, wie man das Datenziel dynamisch ändert.

Wenn ein Datum verfügbar ist, kann ein Tag im Kalender wie folgt aussehen:

<div id="20140226" data-id="20140226" class="NotRequested calDay" data-target="#modalDialog1" data-toggle="modal">26</div> 

ich eine Show-Veranstaltung haben, die die ID des Tages div zieht und setzt die ID des Antrags div, die funktioniert fein.

$('#modalDialog1').on('show.bs.modal', function (e) { 
    $(e.target).data("id", $(e.relatedTarget).data("id")); 
} 

In diesem modalen sendet eine Schaltfläche, um eine Anfrage für das Datum, und dann erfolgreich, wenn tauscht die Klasse des div ist zu zeigen, dass das Datum beantragt.

Hier ist mein Problem: In Bootstrap 2x würde ich das Klickereignis lösen und an ein neues Klickereignis neu binden.

In Bootstrap 3x versuche ich das Datenziel zu ändern.

dateElement.data("target", "#modalDialog2"); 

Als ich wieder an diesem Datum klicken, erhalte ich die anfängliche Anfrage Dialog „# modalDialog1“ statt # modalDialog2

ich auch versucht haben, die bind/unbind Code zu halten, aber es, wie ich aussieht muss die modale Datenumschaltung entfernen, da jetzt beide Dialoge nach dem Anfordern eines Datums angezeigt werden.

Ich vermisse offensichtlich etwas.

Wie kann ich das Datenziel dynamisch ändern, so dass es den 2. Dialog aufruft?

Answer 1

Ich weiß, das alt ist, so dass ich hoffe, dass dies alles korrekt ist.

Ich glaube, ich habe dies gelöst, indem Sie das Datumselement oben durch Abrufen der ID aus der Anfrage modalDialog1 erhalten.

Wenn die Anforderung erfolgreich war, wird das css- und click-Ereignis geändert.

var dateElement = $("#" + $("#modalDialog1").data("id")); 
dateElement.removeClass("NotReceived"); 
dateElement.unbind('click'); 

Setzen Sie dann die neue CSS und Ziel

dateElement.addClass("Requested"); 
dateElement("target", "#modalDialog2"); 

Dann auf die neue Funktion das Click-Ereignis Bindung Dialog2

dateElement.bind('click', PromptDialog2Function); 

anzuzeigen

Answer 2

In meinem einfachen Code unten bestimmt die Dropdownlist, welchen Dialog

angezeigt wird

<select onchange="$('#btn').data('target', this.value)"> 
<option value="#dlg1">Dialog 1</option> 
<option value="#dlg2">Dialog 2</option> 
</select> 
<button id="btn" data-target="#dlg1" onclick="$($(this).data('target')).modal('show');"> 
    Show Dialog 
</button>