Second click on button to send form? - ajax

Question

I'm working on a delete function in a web app where clicking on a button deletes a row in my db. This is pretty straight forward and it works, but I want the user to be able to confirm the delete first before the form is submitted.
Here's the markup for the form as it is now:
echo '<li class="fave-item">';
echo '<div class="tasted-this box-center">';
echo '<form class="delete-fave">';
echo '<input type="hidden" name="user_id" value="'.$faves_result['user_id'].'" />';
echo '<input type="hidden" name="beer_id" value="'.$faves_result['beer_id'].'" />';
echo '<button class="icon delete" data-icon="x" />';
echo '</form>';
echo '</div>';
echo '</li>';
And here's the ajax submit func.:
$('.delete-fave').on('submit', function(){
$.ajax({
type: "POST",
url: "deletefave.php",
data: $(this).serialize(),
success: $.proxy(function(json) {
$(this).closest('li.fave-item').remove();
},this)
});
return false;
});
This is what I want to happen before the submit:
$('button.delete').click(function(){
$(this).parent().addClass('delete-fave');
$(this).addClass('ready');
return false;
});
When I tested this I removed the class from the form to achieve this order of events:
Click 'button.delete' adds class 'delete-fave' to form (making it active)
'button.delete' gets a 'ready' class
Clicking again on button with the 'ready' class submits form.
I haven't been able to merge these functions so I hope you can help me out!

Answer 1

The $('.delete-fave').on('submit'... function is defined BEFORE the class is added to the button.delete parent, so it's not going to work.
To get it to work just redefine the function again AFTER adding the class.
JSFiddle recreating your problem: http://jsfiddle.net/rowlandrose/XAeCh/5/
JSFiddle solving your problem: http://jsfiddle.net/rowlandrose/XAeCh/4/