JQuery/Ajax form not submitting - php

Question

I'm pulling my hair out over this one - I have a page that searches a MySQL database and returns the results in a table. I want the user to be able to update the results and hence update the MySQL database. The first part works ok, I have a search box on the page, which uses jQuery/ajax to query the database and display the results, e.g.:
<form class="well" id="jquery-submit-ajax" method="post">
<input type="text" name="userSearch" placeholder="Search…">
<label>Name/Email/id</label>
<Br />
<input type="submit" id="searchButton" value="Search">
</form>
<div class="alert alert-success hide">
<div id="success-output" class="prettyprint"></div>
</div>
<div id="loading-image" class="alert hide" style="text-align:center">
<img src="../images/ajax-loader.gif" /></div>
<div class="alert alert-error hide">
<div id="error-output" class="prettyprint"></div>
</div>
</div>
and the jQuery:
$("#jquery-submit-ajax").submit(function(e) {
$('#loading-image').fadeIn();
$.ajax({
type: "POST",
url: "jquery-ajax-control.php",
data: $(e.target).serialize(),
dataType: "html",
beforeSend:function(){
$('.alert-error,.alert-success').hide();
},
error: function(jqXHR, textStatus, errorThrown){
$('#loading-image').hide();
$('.alert-error').fadeIn();
$('#error-output').html(errorThrown);
},
success: function(data){
$('#loading-image').hide();
$('.alert-success').fadeIn();
$('#success-output').html(data);
}
});
return false;
});
So the results are parsed into a table for each result. Within that table is a form with a submit button. e.g.:
<form method="post">
<table>
<tr>
<td><input type="text" class="editbox" name="subs-expiry" value="<?php echo $expiry_date; ?>"</td>
</tr>
</table>
<input type="submit" class="updateSubsButtons" value="Update" />
</form>
I'm trying to submit this form via jQuery/Ajax again, but I can't get it to work. Pressing the Update button results in the whole page refreshing. I've stripped the jQuery for this button right back to just display an alert when the button is pressed, but even that doesn't work.
$(".updateSubsButtons").on("submit", function(e){
alert("clicked");
e.preventDefault();
});
Using the Chrome debugger a breakpoint in the function never gets hit, so maybe jQuery can't find the button? I've tried .on() and .live() functions, but I get the same result with both. I really can't figure out what's going on here, so any help would be gratefully received!

Answer 1

Try replacing it with a button, and a 'click' event.
<button class="updateSubsButtons">Update</button>
$(".updateSubsButtons").on("click", function(e){
alert("clicked");
console.log(e);
e.preventDefault();
});
Here's how to deal with asynchronously loaded items(added because this is how the problem was actually fixed.):
$(".AlreadyLoadedParent").on("click",'.buttonYouWantToClick', function(e){
alert("clicked");
console.log(e);
e.preventDefault();
});

Answer 2

First, you "click" a button, you don't "submit" it. You submit the form. So you should work with the event "click".
Second, if the button that should trigger the jQuery code is loaded using AJAX you should bind the event using .live() function like this:
$('.updateSubsButtons').live('click', function(e) {
e.preventDefault();
// Your code here...
}
This way the click event is bound to every new object with class="updateSubsButtons" that is loaded even after the page is loaded. If you use $('.identifier').click() it only works on objects that are already loaded when the page loads and doesn't work on elements being loaded through AJAX.