引導程序將遠程窗體載入模態

Question

我使用引導程序模式將遠程FORM載入模態。但是，當我從表單中單擊提交按鈕時，on.submit函數未執行！點擊提交按鈕直接發送給位於action標籤的頁面！

的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'); 
    }); 

感謝您的幫助......

Answer 1

的on.submit綁定不會工作，因爲它可能會發生在遠程頁面仍然沒有完成加載並放入DOM，而綁定已經執行。

只要確保在加載遠程DOM後執行on.submit綁定事件。

E.g.改變你的負荷：

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