event.preventDefault () не работает с AJAX

У меня были некоторые проблемы с формой AJAX сегодня. Я много чего перепробовал, но не могу заставить его работать.

Мой jQuery должен помешать отправке формы. Это должно пройти через AJAX. Тем не менее, он, кажется, игнорирует event.preventDefault (); и просто отправляет форму.

Форма является частью «одной страницы». Одностраничная страница — это страница, которая загружается через AJAX. Форма является стандартной формой с методом POST.

Вопрос:
Почему event.preventDefault () не работает и как я могу решить эту проблему?

Форма:

<form id="comment-form" action="commentsystem.php" method="post">
<input type="text" placeholder="Write a comment..." name="commentTxt" />
<input type="hidden" value="'.$row['id'].'" name="postID" />
<div class="submit-btn">
<img src="assets/images/checkmark.svg" />
<input type="submit" value="" />
</div>

Jquery:

$('#comment-form').on('submit', function (event) {
// Stop the browser from submitting the form.
event.preventDefault();

// Serialize the form data.
var formData = $('#comment-form').serialize();

$.ajax({
type: 'post',
url: $(form).attr('action'),
data: formData,
success: function (response) {
$('.comment-container').append(response);
}
});
});

Commentsystem.php:

$sql = "INSERT INTO comments (postID, userID, comment) VALUES ('$_POST[postID]', '$_SESSION[id]', '$_POST[commentTxt]')";

if ($conn->query($sql)===TRUE){
echo '<p><span class="username">'.$_SESSION[id].'</span>'.$_POST[commentTxt].'</p>';
} else{
echo 'Something went wrong while sending your comment.';
}