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) {
      var user_unliked = function(response) {
      $.getScript('//', function() {
          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') {
          FB.Event.subscribe('xfbml.render', function() {
            // fires after parser has finished rendering


And the markup on the page:

  <div class="box">
    <div class="fb-like" data-href="" data-send="false" data-width="300" data-show-faces="false"></div>