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，而绑定已经执行。

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

E.g。将你的负荷改为：

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

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

1 个答案: