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());
              }
      );