wake-up-neo.com

Bootstrap modaler Dialog, show.bs.modal event relatedTarget ist undefiniert. Wie kann ich ein angeklicktes Element erhalten?

Aufgerufene Schaltfläche Modaldialog: Wenn auf die Schaltfläche geklickt wird, wird das Ereignis ausgelöst. Die resultierende Ereignisreferenz e.relatedTarget ist undefiniert. Wie kann ich die aufrufende Schaltfläche vom Handler erhalten? e scheint keinen Verweis auf die aufrufende Schaltfläche zu enthalten.

<!-- Button trigger modal -->
<button class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal">
  Launch demo modal
</button>

<!-- Modal -->
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
        <h4 class="modal-title" id="myModalLabel">Modal title</h4>
      </div>
      <div class="modal-body">
        ...
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
        <button type="button" class="btn btn-primary">Save changes</button>
      </div>
    </div>
  </div>
</div>

jQuery:

$('#myModal').on('show.bs.modal', function (e) {
  console.log(e.relatedTarget) // do something...
})

Referenz: http://getbootstrap.com/javascript/#modals

22
eyn

Schauen Sie sich folgendes an Bootply-Beispiel .

Bei der Ausführung scheint das Show-Ereignis einen korrekten Verweis auf e.relatedTarget Zu enthalten.

$('#myModal').on('show.bs.modal', function (e) {
    var button = e.relatedTarget;
    if (button != null)
    {
        alert("Launch Button ID='" + button.id + "'");
    }
})

Schauen Sie sich das Bootply-Beispiel an, um festzustellen, ob Ihr eigener Code davon abweicht. (Ich habe das ursprüngliche Bootstrap Beispielcode-Snippet direkt aus dem von Ihnen angegebenen Link kopiert.)

Ich hoffe das hilft. Viel Glück.

19
László Koller

Danke Geo1004. Ich habe bereits JS verwendet, um das "show" -Ereignis auf dem Modal auszulösen, aber mir fehlte das zweite Argument. Das event.relatedTarget war also undefiniert.

Wenn jemand anderes die JS-Route geht (anstatt Datenattribute zu verwenden), stelle ich sicher, dass Sie die Schaltfläche als jQuery-Objekt senden.

$( "#myModal" ).modal( "show", $( "#buttonBeingClicked" ) );
14
JDev518

Dies ist eine Problemumgehung. Sie können das Modal stattdessen mit JS öffnen und relatedTarget wird festgelegt. Sie sollten nicht versäumen, die Schaltfläche als zweiten Parameter für die "modale" Methode zu übergeben.

Sie können Datenreferenzen übergeben (hier Adressziel)

$('.listing_btn').on 'click', ->
  $('.modal').modal('show', $(@))

$('#modal').on 'show.bs.modal', (event)->
   button = $(event.relatedTarget)
   address_id = button.data('address-target')
   console.log address_id 
9
geo1004

Ich hatte das gleiche Problem und verschwendete den ganzen Abend, um es zu beheben. Meine bootstrap.js-Version war einfach zu alt und das $ (event.relatedTarget) war für das Ereignis 'show.bs.modal' nicht verfügbar. Jeder, der das gleiche Problem hat, sollte zuerst seine bootstrap= Version prüfen. Dann einfach das offizielle Beispiel der Site beachten: http://getbootstrap.com/javascript/#modals-related-target) Sie finden Ihre Referenz in $ (event.relatedTarget).

4
Hector
$('#myModal').on('show.bs.modal', function (e) {
   console.log($(e.relatedTarget)); // You will get the element you want! Cheers
})
2
Akshay Bajpei