Aquí está mi modal código html:

<div class="modal fade" id="delete-file-modal" role="dialog">
    <div class="modal-dialog">
        <div class="modal-content">
            <form class="form-horizontal" method="post" id="delete_file_form">

                <div class="modal-body">
                    Are you sure you want to delete this file?  
                </div>  

                <div class="modal-footer">
                    <button data-dismiss="modal" class="btn btn-danger" name="in_confirm_insert" id="confirm-delete-button">Delete</button>
                    <button data-dismiss="modal" class="btn btn-default" name="in_confirm_insert" id="cancel-delete-button">Cancel</button>
                </div>

            </form>
        </div>
    </div>
</div>

y aquí está mi código javascript:

$('#delete-file-modal').on('hidden.bs.modal', function (e) {

    var delete_button = $(e.target).is("#confirm-delete-button");

    if(delete_button === true) {
        //delete file
        alert("file deleted.");
    } else {
        alert("delete failed.");
    };
});

Necesito para poder comprobar si el botón eliminar que se hace clic cuando la eliminación-de-archivo-modal está cerrado. Hay algo que falta en mi código javascript?

InformationsquelleAutor Nomad | 2015-02-02

5 Comentarios

  1. 54

    Opción #1

    Dentro de la hidden.bs.modal detector de eventos, event.target se refiere a la modalidad elemento que está oculto, no el hecho clic en el elemento que desencadenó el evento.

    Si quieres determinar el botón que activa el modal para cerrar, una opción es añadir detectores de eventos para el botón de los elementos dentro de la modal. A continuación, dentro de el botón de escucha de eventos, puedes escuchar a la hidden.bs.modal evento en el padre #modal elemento en orden a determinar si el modal fue cerrado. Desde el hidden.bs.modal detector de eventos está dentro del botón click detector de eventos, usted todavía tiene una referencia al elemento que desencadenó la click evento.

    Ejemplo

    $('#delete-file-modal .modal-footer button').on('click', function(event) {
      var $button = $(event.target); //The clicked button
    
      $(this).closest('.modal').one('hidden.bs.modal', function() {
        //Fire if the button element 
        console.log('The button that closed the modal is: ', $button);
      });
    });

    También vale la pena mencionar que el .uno() método sólo se desencadenará el evento cada vez que se adjunta (que es exactamente lo que queremos). De lo contrario, si usted utiliza .on() o .click() adjuntar el evento, el evento podría desencadenar varias veces desde que se vuelve a unir cada vez que el click detector de eventos es despedido.


    Opción #2

    Según el La documentación de Bootstrap, el show.bs.modal/shown.bs.modal los eventos tienen un relatedTarget propiedad adjunta a la cita.

    Si es causada por un clic, el hecho clic en el elemento está disponible como relatedTarget propiedad del evento.

    Por lo tanto, se puede determinar el elemento que desencadena el modal para abrir el evento mediante el acceso a event.relatedTarget dentro de la modal mostrar detector de eventos:

    Ejemplo

    $('#delete-file-modal').on('show.bs.modal', function (event) {
        console.log(event.relatedTarget);
    });

    Tenga en cuenta que el relatedTarget propiedad se asocian únicamente con el modal eventos. Sería agradable si había una propiedad como el que está asociado con el hide.bs.modal/hidden.bs.modal eventos. Como de escribir esto, actualmente no no.


    Opción #3

    Como Andrew señaló en los comentarios por debajo de esta respuesta, también se puede comprobar para ver que elemento de la página tiene el foco mediante el acceso a documento.activeElement.

    En el siguiente fragmento, un detector de eventos se adjunta a la modal elemento para mostrar y ocultar los eventos. Cuando se activa el evento, se realiza una comprobación para ver si el actualmente se centra en el elemento tiene un [data-toggle] o [data-dismiss] atributo (lo que implica que de hecho disparar el evento).

    Ejemplo

    $('#delete-file-modal').on('hide.bs.modal show.bs.modal', function(event) {
      var $activeElement = $(document.activeElement);
    
      if ($activeElement.is('[data-toggle], [data-dismiss]')) {
        console.log($activeElement);
      }
    });

    Si usted está escuchando a las dos de mostrar/ocultar eventos, como en el ejemplo de arriba, y se quiere diferenciar entre los eventos, se puede comprobar event.type:

    Ejemplo

    $('#delete-file-modal').on('hide.bs.modal show.bs.modal', function(event) {
      var $activeElement = $(document.activeElement);
    
      if ($activeElement.is('[data-toggle], [data-dismiss]')) {
        if (event.type === 'hide') {
          //Do something with the button that closed the modal
          console.log('The button that closed the modal is: ', $activeElement);
        }
    
        if (event.type === 'show') {
          //Do something with the button that opened the modal
          console.log('The button that opened the modal is: ', $activeElement);
        }
      }
    });
    • Gracias por los ejemplos que funcionó a la perfección. Pero necesito comprobar si el botón dentro de la modal se hizo después de que el modal es cerrado. Es posible hacer eso?
    • Estoy usando jQuery 3 y e.relatedTarget muestra undefined
    • También muestra indefinido en jQuery2.11 *** Desprecio *** Se centra en el modal evento y no el botón de evento…
    • Acabo de probar con jQuery v3.1 y funcionó aquí. Si usted proporciona un ejemplo de que no funciona, entonces me puede echar un vistazo.
    • Esto funciona demasiado: $(‘#myModal’).en(‘ocultar.bs.modal’, function (e) { var tmpid = $(document.activeElement).attr(‘id’); alert(tmpid); }); no voy a entrar en la » X » en la modal, a menos que usted id….
    • Opción #3 es buena, aunque tiene un inconveniente: llamar a .hide() manualmente, será considerada como presionar escape (como documento.activeElement se establece en el cuerpo).
    • Los violines en la Opción #3 no se muestra una alerta en Firefox 57 o Safari 10.1.2. Es esta obsoleto? Funciona en Chrome, aunque.
    • Opción #3 no parece funcionar en Safari o Firefox para Mac (posiblemente un problema de versión, en lugar de una plataforma de uno): la moda en sí es el elemento activo cuando hace clic en un botón, no el propio botón.

  2. 5

    Esto también funciona:

    $('#myModal').on('hide.bs.modal', function (e) { 
    var tmpid = $(document.activeElement).attr('id'); alert(tmpid); 
    }); 

    No obtener el id de la ‘X’ en el modal a menos que usted id. Devolverá el id del elemento que desencadena el cierre de la modal….

    • También puede ser que desee hacer un cheque contra $(document.activeElement).hasClass('btn') para asegurarse de que estaba solo pulsar un botón y no otra cosa. He aquí por qué he tenido que hacerlo de esa manera. Yo estaba usando el mismo Son de Su Seguro? diálogo para la inscripción y la cancelación de símbolo del sistema. Entonces, yo tenía el mismo id en los botones de muestra. Así que, tuve que comprobar la .text() de la propiedad del botón y, a continuación, utilizar .indexOf(). Pero si alguien hace clic en el fondo o pulsar la tecla escape, a mi si/entonces la condición de que mostrar el resultado es incorrecto. Es por eso que ahora puedo comprobar con .hasClass('btn').
    • Conciso y claro. Me encanta! Nota, esto va a funcionar en hide.bs.modal pero no hidden.bs.modal. El último siempre mostrar el elemento activo como body, lo que hace sentido, ya que el modal ya se ha quitado de la DOM.
  3. 2

    Para extender @JoshCrozier la respuesta:

    Sería agradable si había una propiedad como el que está asociado con la piel.bs.modal/oculto.bs.modal de eventos. Como de escribir esto, hay en la actualidad no es


    Este se encarga de emular un comportamiento similar, que une el botón pulsado como relatedTarget para más tarde oyentes:

    $( '.modal-footer .btn[data-dismiss="modal"]' ).on( 'click', function() {
        var target = this
    
        $( target ).closest( '.modal' )
            .one( 'hide.bs.modal hidden.bs.modal', function( event ) {
                event.relatedTarget = target
            } )
    } )

    El selector y el oyente puede ser optimizado en función de cómo los verbos modales son utilizados en un proyecto. Por ejemplo: si sabes que no vas a usar hide.bs.modal sólo puede modificar hidden.bs.modal‘s evento lugar.

  4. 1

    La @JoshCrozier respuesta es buena y útil, pero a veces necesitamos Determinar bruja elemento que desencadenó la modal abierto/cerrado DESPUÉS de que se ha cerrado. (@Nómada ha mencionado esto en los comentarios debajo de la @JoshCrozier respuesta).

    También algunas veces necesitamos determinar qué vínculo o un botón en el body o header desencadenó el modal para cerrar (no sólo los botones en la footer).

    Luego escribo esta solución para mezcla @JoshCrozier y @Katia respuestas con mi manera de ser y de mejorar la solución final:

    Agregar esta parte a los Scripts de la página:

    $('body').on('click','.modal .dismiss-modal', function() {
        var closeRelatedTarget = this;
        var $modal = $(closeRelatedTarget).closest('.modal');
        $modal.one('hide.bs.modal hidden.bs.modal', function(event) {
            $modal.data('closeRelatedTarget',closeRelatedTarget);
        });
        $modal.data('closeRelatedTarget','wait');
        $modal.modal('hide');
    });
    $('body').on('show.bs.modal','.modal', function(event){
        $(this).data('closeRelatedTarget','anElement');
        $(this).data('showRelatedTarget',event.relatedTarget);
    });

    Ahora utilizar fácilmente con simples Controladores de Eventos o de Obtener el elemento objetivo:

    ● Determinar la bruja elemento que desencadenó la modales para mostrar en show y shown (Un embed Bootstrap característica):

     $('#MyModal').on('show.bs.modal', function (event) {
         console.log(event.relatedTarget);
     });

    y

     $('#MyModal').on('shown.bs.modal', function (event) {
         console.log(event.relatedTarget);
     });

    ● Determinar la bruja elemento que desencadenó la modales para cerca de en hidden

     $('#BuyModal').on('hidden.bs.modal', function (event) {
          if($(this).data('closeRelatedTarget')=='wait')
          {return;}
    
          console.log($('#MyModal').data('closeRelatedTarget'));
     });

    ● Determinar la bruja elemento que desencadenó la modales para mostrar incluso después de que el modal es cerrado

     console.log($('#MyModal').data('showRelatedTarget'));

    ● Determinar la bruja elemento que desencadenó la modales para cerca de incluso después de que el modal es cerrado

     console.log($('#MyModal').data('closeRelatedTarget'));

    Nota: en Lugar de data-dismiss="modal" el uso de la propiedad de mi modal-dismiss clase a cada elemento del modelo que se puede cerrar el modelo y desea determinar (no uso tanto modal-dismiss clase y data-dismiss="modal" juntos).

    Ejemplo: <a href="/more_info.html" class="dismiss-modal">More info</a>

    ¿Por qué? Porque data-dismiss="modal" cerrar el modelo y el gatillo de ocultar y ocultos antes de closeRelatedTarget.

  5. 0

    Estamos overthinking este. Es tan simple como un botón estándar de controlador. Los datos descartan=»modal» hará que el cuadro de diálogo desaparece, y todavía saber que el botón que nos interesa se hizo clic.

    $('#delete-file-modal').on('click','#delete-file-modal #confirm-delete-button', function (e) {
      e.preventDefault();
      console.log('confirmed delete');
      return false;
    });

Dejar respuesta

Please enter your comment!
Please enter your name here