JQuery load() will break facebook like button/comment box. How to workaround?

Question

I am coding a big website but I have cut down my problem into the following tiny html file:

http://dl.dropbox.com/u/3224566/test.html

The problem is that if I (re)load with JQuery a content that features a facebook code, the latter won't appear, even if I reload the script (leading to a duplication of that all.js script, which is another issue).

How can I fix this?

Regards, Quentin

Answer 1

Use the FB.XFBML.parse() ^docs after you load the new content

function loadPage() {
  $('#test').load('test.html #test', function() {
    FB.XFBML.parse( );
  }).fadeOut('slow').fadeIn('slow');
}

---

Note, that loading a fragment with id test in a div with id test will create multiple (two) elements with the same id (nested in each other) in the page, which should never happen as it is invalid.

To avoid this use the more verbose $.get method

$.get('test.html', 
        function(data) {
                    var temp = $('<div>').html(data).find('#test');
                    $('#test').html(temp.html());
              }
      );