Bootstrap charger la forme distante dans le modal

Question

J'utilise un modal bootstrap pour charger un FORM distant dans le modal. Mais lorsque je clique sur le bouton "submit" du formulaire, la fonction on.submit n'est pas exécutée! Le clic sur le bouton de soumission m'envoie directement à la page située dans le tag d'action!

Le html

<a href="v1_users.inc.php" data-toggle="modal" data-target="#myUsers"><i class="fa fa-users" aria-hidden="true" style="font-size:2em"></i></a> 

    <div id="myUsers" class="modal fade move-horizontal" data-backdrop="static" data-keyboard="false"> 
     <div class="modal-dialog custom-connect modal-lg"> 
     <div class="modal-content"> 
      <div class="modal-header"> 
      <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button> 
      <h3 id="connectLabel" class="modal-title" style="color:#818181"><i class="fa fa-users" style="color:#818181"></i> Comptes utilisateurs </h3> 
      </div> 
      <div class="modal-body"> 
      </div> 
      <div class="modal-footer"> 
      <button type="button" class="btn btn-default" data-dismiss="modal">Fermer</button> 
      </div> 
     </div><!-- /.modal-content --> 
     </div><!-- /.modal-dialog --> 
    </div><!-- /.modal --> 

javascript

$('a[data-toggle="modal"]').on('click', function(e) { 
    var target_modal = $(e.currentTarget).data('target'); 
    var remote_content = e.currentTarget.href; 

    var modal = $(target_modal); 
    var modalBody = $(target_modal + ' .modal-body'); 

    modal.on('show.bs.modal', function() { 
      modalBody.load(remote_content); 
     }).modal(); 

    return false; 
    }); 

    $(".myRemoteForm").on("submit", function(e) { 
     alert('TEST'); 
    }); 

Merci pour votre aide ...

Answer 1

Le on.submit liant ne travaille car il peut arriver que la page à distance encore pas fini de charger et de mettre dans le DOM, tandis que la liaison déjà exécutée.

Assurez-vous simplement que l'événement de liaison on.submit est exécuté après le chargement du DOM distant.

E.g. changez votre charge en:

modal.on('show.bs.modal', function() { 
     modalBody.load(remote_content, function(){ 
      $(".myRemoteForm").on("submit", function(e) { 
       alert('TEST'); 
      }); 
     }); 
    }).modal();