web-dev-qa-db-fra.com

Bootstrap dialogue modal, show.bs.modal event relatedTarget n'est pas défini. Comment puis-je obtenir l'élément cliqué?

Boîte de dialogue modale invoquée par le bouton: lorsque vous cliquez sur le bouton, l'événement est déclenché, la référence d'événement résultante e.relatedTarget n'est pas définie. Alors, comment puis-je obtenir le bouton d'appel du gestionnaire? Il ne semble pas contenir de référence au bouton d'appel.

<!-- 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...
})

Référence: http://getbootstrap.com/javascript/#modals

twitter-bootstrapeventsdialogmodal-dialogfuelux
22
eyn

Jetez un oeil à ce qui suit exemple Bootply .

Lorsqu'il est exécuté, l'événement show semble inclure une référence appropriée à e.relatedTarget.

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

Jetez un oeil à exemple Bootply pour voir si votre propre code s'en écarte. (J'ai copié l'original Bootstrap exemple d'extrait de code directement à partir du lien que vous avez fourni.)

J'espère que ça aide. Bonne chance.

19
László Koller

Merci Geo1004 .. J'utilisais déjà JS pour déclencher l'événement "show" sur le modal, mais il me manquait le deuxième argument. Donc, event.relatedTarget n'était pas défini.

Si quelqu'un d'autre utilise la route JS (au lieu d'utiliser des attributs de données), je m'assurerais que vous envoyez le bouton en tant qu'objet jQuery -

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

Il s'agit d'une solution de contournement. Vous pouvez ouvrir le modal avec JS à la place et la cible associée sera définie. Vous ne devez pas manquer de passer le bouton comme deuxième paramètre pour la méthode "modale".

Vous pourrez passer des références de données (ici adresse-cible)

$('.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

J'ai eu le même problème et j'ai perdu toute la soirée pour le réparer. Ma version de bootstrap.js était simplement trop ancienne et le $ (event.relatedTarget) n'était pas disponible pour l'événement 'show.bs.modal'. Toute personne ayant le même problème doit d'abord vérifier sa version bootstrap. Ensuite, respectez simplement l'exemple du site officiel: http://getbootstrap.com/javascript/#modals-related-target Vous trouverez votre référence dans $ (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