次の 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 応答を 1 回取得できますが、2 回目に実行しようとするとcontact.php
、ナビゲーターに読み込まれます。event.preventDefault()
これを防ぐ必要があるため、取得できません。複数の AJAX 呼び出しを機能させるにはどうすればよいですか?