twitter-bootstrap - eventos - modal bootstrap 3

Bootstrap modal dialog, show.bs.modal event relatedTarget no está definido. ¿Cómo puedo hacer clic en el elemento?

Question

Cuadro de diálogo modal invocado por botón: cuando se hace clic en el botón, se dispara el evento, la referencia del evento resultante e.relatedTarget no está definido. Entonces, ¿cómo puedo obtener el botón de invocación del controlador? e no parece contener ninguna referencia al botón de invocación.

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

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

Answer 1

Eche un vistazo al siguiente ejemplo de Bootply .

Cuando se ejecuta, el evento show parece incluir una referencia adecuada a e.relatedTarget .

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

Eche un vistazo al ejemplo de Bootply para ver si su propio código se desvía de él. (Copié el fragmento de código de ejemplo original de Bootstrap directamente desde el http://getbootstrap.com/javascript/#modals que proporcionó).

Espero que esto ayude. Buena suerte.

Answer 2

Esta es una solución. Puede abrir el modal con JS en su lugar y se establecerá el destino relacionado. No debe perderse pasar el botón como segundo parámetro para el método ''modal''.

Podrás pasar referencias de datos (aquí dirección-destino)

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

Answer 3

Gracias Geo1004 .. Ya estaba usando JS para activar el evento "show" en el modal, pero me faltaba el segundo argumento. Así que el evento.relatedTarget fue indefinido.

Si alguien más va por la ruta JS (en lugar de usar atributos de datos) me aseguraría de que esté enviando el botón como un objeto jQuery -

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

Answer 4

Tuve el mismo problema y desperdicié toda la noche para solucionarlo. Mi versión bootstrap.js era simplemente antigua y $ (event.relatedTarget) no estaba disponible para el evento ''show.bs.modal''. Cualquier persona con el mismo problema debe verificar primero su versión bootstrap. Luego, simplemente siga el ejemplo del sitio oficial: http://getbootstrap.com/javascript/#modals-related-target Encontrará su referencia en $ (event.relatedTarget).

Answer 5

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