event.preventDefault() not working with AJAX - php

Question

I've been having some trouble with an AJAX form today. I've tried lots of things, yet can't get it to work.
My jQuery should prevent the form to submit. It has to go through AJAX. Yet, it seems to ignore event.preventDefault(); and just submits the form.
The form is part of 'single-page'. Single-page is a page which is loaded via AJAX. The form is a standard form with POST method.
Question:
Why does event.preventDefault() not work and how do I fix this issue?
Form:
<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.';
}

Answer 1

Late to the party! I recently had this issue, hoping this will help someone else. I'm not sure why this happened, but on my localhost the following worked fine but on production preventDefault wasn't working.
$(document).ready(function() {
$(document).on('submit', ".edit-form", function(event) {
event.preventDefault(); // Stop form from submitting normally
var url = $(this).attr("action"); // where to post to
// more code
return false; // added for good measure(might not need)
});
});
Apparently the .on() doesn't like being in $(document).ready(), and from some reading it doesn't need to be. Which is great if you are using it like I was, because I was replacing forms that also needed it.
So all you need to do is remove the $(document).ready(){}; and see if it works just like this.
$(document).on('submit', ".edit-form", function(event) {
event.preventDefault(); // Stop form from submitting normally
var url = $(this).attr("action"); // where to post to
// more code
return false; // added for good measure(might not need)
});
As I said I'm not sure why this works, I haven't messed with jQuery in a long time, all I know is that it on my localhost preventDefault worked as expected and on production it ignored it. If anyone could point me in the the right direction of why it would work on local and not production? It would be appreciated. Maybe the hosting companies PHP settings? (haven't a clue, grasping at straws at this point)

Answer 2

I've figured it out myself. Am posting my own answer because it might help out someone else.
I changed:
$('#comment-form').on('submit', function (event) {
to:
$(document).on("click",".comment-submit", function(event) {
Note that I added a class to my submit button in the form.
I have no idea why this is working, but it does. If anyone could explain, that'd be appreciated.