jQuery多次提交表单

Question

我有以下Bootstrap联系表格：

     <form id="contactForm" class="form-horizontal" data-async data-target="#contact" action="/contact.php" method="POST">
         (...)
         <button class="btn btn-primary pull-right" type="submit">Send</button>
     </form>

这个jQuery代码：

$('form[data-async]').on('submit', function(event) {
    var $form = $(this);
    var $target = $($form.attr('data-target'));

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

        success: function(data, status) {
            $target.html(data);
        }
    });

    event.preventDefault();
});

我可以提交表单并获得一次AJAX响应但第二次尝试执行此操作时会在导航器中加载contact.php。我不明白，因为event.preventDefault()应该阻止这一点。如何使多个AJAX调用工作？

Answer 1

尝试表格+ ajax，不要给出复杂性。如果它工作，那么它的代码。