Bootstrap 将远程表单加载到模式中

Question

我正在使用 bootstrap 模态将远程 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，而绑定已执行。

只需确保 on.submit 绑定事件在远程 DOM 加载后执行。

例如将您的负载更改为：

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

Bootstrap 将远程表单加载到模式中

Bootstrap load remote form into modal

forms

jquery

submit

bootstrap-modal