使用 Twitter Bootstrap 3.1 模式提交的 jQuery AJAX 表单答案

【问题标题】：jQuery AJAX form submit with Twitter Bootstrap 3.1 modal使用 Twitter Bootstrap 3.1 模式提交的 jQuery AJAX 表单
【发布时间】：2014-03-05 15:21:58
【问题描述】：

我正在使用 Twitter Bootstrap 3.1 远程模式：

<!-- Modal -->
<div class="modal fade" id="remoteModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
        <h4 class="modal-title" id="myModalLabel">Modal title</h4>
      </div>
      <div class="modal-body">
        <form action="remote.php" method="post">
        ...
        </form>
        <script type="text/javascript" src="js/bootstrap-modal.js"></script>
      </div>
    </div>
  </div>
</div>

通过链接启动：

<a data-toggle="modal" href="remote.php" data-target="#remoteModal">Click me</a>

如您所见，bootstrap-modal.js 脚本处理表单的提交按钮：

$(document).ready(function() {

    $('.modal-link').click(function(e) {
        var target = $(this).attr('href');

        // load the url and show modal on success
        $('#remoteModal .modal-content').load(target, function() {
             $('#remoteModal').modal('show');
        });

        e.preventDefault();
    });

    $('.modal').on('submit', 'form[data-async]', function(e) {
        var $form = $(this);
        var enctype = $form.attr('id')

        if(enctype == 'multipart') {
            var formData = new FormData(this);

            $.ajax({
                type: $form.attr('method'),
                url: $form.attr('action'),
                data: formData,
                mimeType: "multipart/form-data",
                contentType: false,
                cache: false,
                processData: false,

                success: function(data, status) {
                    $('#remoteModal').removeData('bs.modal');
                    $('#remoteModal .modal-content').html(data);
                }
            });
        }
        else {
            var submitButton = $("input[type='submit'][clicked=true], button[type='submit'][clicked=true]", $form);
            var formData = $form.serializeArray();

            if(submitButton.size() === 1) {
                formData.push({ name: $(submitButton[0]).attr("name"), value: "1" });
            }
            else if(submitButton.size() !== 0) {
                console.log("Weird, multiple submit-buttons pressed!");
            }

            $.ajax({
                type: $form.attr('method'),
                url: $form.attr('action'),
                data: formData,
                cache: false,

                success: function(data, status) {
                    $('#remoteModal').removeData('bs.modal');
                    $('#remoteModal .modal-content').html(data);
                }
            });
        }

        e.preventDefault();
    });

    $('.modal').on("click", 'input[type="submit"], button[type="submit"]', function() {
        $('form[data-async] input[type=submit], form[data-async] button[type=submit]', $(this).parents("form")).removeAttr("clicked");
        $(this).attr("clicked", "true");
    });
});

问题：

第一次单击表单的提交按钮时它工作正常，但我第二次单击它，表单被发布两次，第三次单击它，三次，等等。

有什么帮助吗？

谢谢奥利

【问题讨论】：

标签： jquery ajax twitter-bootstrap modal-dialog submit

【解决方案1】：

您需要解绑提交事件，这将停止发布多次

$('.modal').unbind().on('submit', 'form[data-async]', function(e) {

【讨论】：

非常感谢！但是你知道 sumbmit 事件是从哪里来的吗？
你是什么意思？取决于你如何触发提交事件。您是否单击任何自定义按钮来提交您的表单？否则默认输入类型 submit 将触发提交事件。

【解决方案2】：

在您的事件处理程序中，在继续之前检查以下内容： if(event.isDefaultPrevented()) return;

由于 jQuery 的设计，阻止的事件也会传递给处理程序。

【讨论】：