Can't load Facebook comments when loading content dynamically using Ajax/jQuery

Question

I am having issues getting Facebook comments to load after adding them to a webpage using ajax.

Javascript Code:

    $().ready(function() {
            $(document).delegate(".image a", "click", function() {
                $("#dynamic-image").load($(this).attr("href"), {ajaxload:1}, function() {
                    $("#dynamic-image").css("display","block");

                    $('#dynamic-image').lightbox_me({
                        zIndex: 999,
                        centered: false,
                        modalCSS: {top: '10px'},
                        overlayCSS: {background: 'black', opacity: .9},
                        onLoad: function() { 
                            $("#dynamic-image").css("display","block");
                            FB.XFBML.parse(document.getElementById('ajax-fb-comments'));
                        },
                        onClose: function() {
                            $("#dynamic-image").css("display","none");
                        }
                    });
                });
                return false;
            });
        });

HTML5 Facebook comments code:

<div class="fb-comments" data-href="<? echo the_permalink(); ?>" data-width="627" data-num-posts="10" data-colorscheme="light" id="ajax-fb-comments"></div>

I have tried using both XFBML and HTML5 Facebook comment code and neither worked. I have used FB.XFBML.parse() before, I have it working fine with dynamically loaded like buttons however its having issues with the Facebook comments, they just don't load and there are no Javascript errors.

Answer 1

I got this to work.

All I had to do was use "FB.XFBML.parse()" and target the div that was around the fb comment tags.