ブートストラップでリモートフォームをモーダルにロード

Question

私はブートストラップモーダルを使用してリモートFORMをモーダルにロードしています。しかし、フォームから送信ボタンをクリックすると、on.submit関数は実行されません！送信ボタンをクリックすると、アクションタグにあるページに直接送信されます。

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バインディングイベントが実行されていることを確認してください。

など。負荷を次のように変更してください。

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