ajax - Second click on button to send form? -

i'm working on delete function in web app clicking on button deletes row in db. pretty straight forward , works, want user able confirm delete first before form submitted.

here's markup form 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 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 want happen before submit:

$('button.delete').click(function(){   $(this).parent().addclass('delete-fave');   $(this).addclass('ready');   return false;     }); 

when tested removed class form achieve order of events:

1. click 'button.delete' adds class 'delete-fave' form (making active)
2. 'button.delete' gets 'ready' class
3. clicking again on button 'ready' class submits form.

i haven't been able merge these functions hope can me out!

the $('.delete-fave').on('submit'... function defined before class added button.delete parent, it's not going work.

to work redefine function again after adding class.

jsfiddle recreating problem: http://jsfiddle.net/rowlandrose/xaech/5/

jsfiddle solving problem: http://jsfiddle.net/rowlandrose/xaech/4/