Pausing execution until remove() is complete?

Pausing execution until remove() is complete?

My setup is simple, a user clicks a link that runs some AJAX, loading a form.  I append the form to an element with a dummy class called "posting".  There is more than one link like this on a page, so the first time the user clicks everything happens as it should.  I bind some form events to control the submit and key events (for a character counter).

If the user clicks one of the other links, the same thing should happen except this time it should check to see if another form with the class "posting" exists.  If it does it runs this code:

  1. $('.posting').closest('.tip_item').find('.post-comment-container').fadeIn(400);
  2. $('.posting').parent().hide(400, function() { $(this).remove(); });
The first line finds the link that activated the current form (which I faded out) and fades it back in.  The second line hides the current form, then removes it...or at least it should.  The problem is that this code doesn't seem to be finished by the time I call my function to bind my form events, so both the existing form and the new AJAX-loaded form are being bound.  For some reason this is causing my character counter to not work.

Is there a way to make the script wait until the previous form is removed before continuing on?  Right now, if I add a console.log(form) to my binding method, the first time it only shows the current form, but every time after that it shows two forms, the previous one and the current one.