Getting Facebook FB.Event.subscribe edge.create & edge.remove to work with AJAX

This is a quick reminder to myself so I don't forget in future. I've got a Facebook Like button which I'm reloading using AJAX. Using FB.XFBML.parse(); is required to render XFBML markup on the fly but for some reason both the FB.Event.subscribe('edge.create') and FB.Event.subscribe('edge.remove') were not working after any AJAX event. The fix was to remove '<div id="fb-root"></div>' from the markup, and although this resulted in the warning message "The "fb-root" div has not been created, auto-creating" in the console, the events when the Like button is clicked do then work.

Below is a very rough example of the JS used for the Like button in a Drupal AJAX driven form:

(function ($) {

Drupal.behaviors.anExample = {
  attach: function (context, settings) {
    if (context == document) {
      var user_liked = function(response) {
        alert('create');
      };
      var user_unliked = function(response) {
        alert('remove');
      };
      $.getScript('//connect.facebook.net/en_UK/all.js', function() {
        FB.init({
          appId: '123456798910',
          status: true,
          cookie: true,
          xfbml: true,
          oauth: true
        });
        FB.Event.subscribe('edge.create', user_liked);
        FB.Event.subscribe('edge.remove', user_unliked);
      });
    }
    else {
      if ($(context).attr('id') == 'test-form') {
        try{
          FB.XFBML.parse();
          FB.Event.subscribe('xfbml.render', function() {
            // fires after parser has finished rendering
          });
        }
        catch(ex){
          console.log(ex);
        }
      }
    }
  }
};

})(jQuery);

And the markup on the page:

  <div class="box">
    <div class="fb-like" data-href="http://www.thecarneyeffect.co.uk/" data-send="false" data-width="300" data-show-faces="false"></div>
  </div>