FB.XFBML.parse() на отдельный элемент ничего не делает

Question

У меня есть большая страница с кнопкой «загрузить больше» внизу; каждый клик на «загрузить больше» загружает больше контента через AJAX. Часть этого контента Facebook как кнопки:

<div class="fb-like" data-href="http://mysite.com/a<?=$x ?>" data-width="100" data-layout="button_count" data-show-faces="false" data-send="false"></div> 

После загрузки дополнительного контента, я могу попросить Facebook повторно проанализировать всю страницу с FB.XFBML.parse(); (который вызывает эти дивы превратиться в фактическую как кнопки). Это работает отлично, однако, он сразу становится медленным, поскольку Facebook повторно анализирует контент, который уже был на странице, а не только новый контент. Каждый раз, когда пользователь нажимает «загрузить больше», он анализирует всю страницу, поэтому для функции FB все больше и больше.

Теперь вот хорошая новость: docs for FB's parse method сказать:

... оценивать только часть документа, вы можете передать в одном элемента.

FB.XFBML.parse(document.getElementById('foo'));

Так что я подумал, хорошо, когда пользователь нажимает кнопку «загрузить больше» я обернуть эту освежающую HTML в уникальном div, а затем использовать JQuery, чтобы пройти через div, найти все Теги Facebook и попросить Facebook разобрать только те. Хорошая идея, не так ли? Но это не сработает. Кажется, что код передает элементы Facebook после их загрузки, но они не анализируются. Код:

// "c" is my container div (a jQuery object, i.e. c = $('#container');) 
// "load more" button 
$('#loadmore').click(function() { 
    $.ajax({ 
     url: "/loadmore.php", 
     success: function(html) { 
      if(html) { 
       // wrap new HTML in special div & append 
       newDivName = "d"+String(new Date().valueOf()); 
       var $newHtml = $("<div id='"+newDivName+"'>"+html+"</div>"); 
       c.append($newHtml); 

       // walk through new HTML and get all Facebook "like" buttons and parse them 
       $('#'+newDivName+' .fb-like').each(function() { 
        FB.XFBML.parse(this); 
       }); 
      } 
     } 
    }); 

}); 

Сообщение об ошибке отсутствует, оно просто не дает никаких результатов. Код отладки на консоли выглядит идеально, он находит все нужные элементы.

UPDATE играть с ним в этом простом jsfiddle: http://jsfiddle.net/pnoeric/NF2jz/4372/

UPDATE 2 Я также попытался изменить код с HTML5 в FBML (click "Get Code" on this page, чтобы увидеть разницу), которые не только имели один и тот же результат но теперь также будет загружать только одну дополнительную кнопку на вызов ajax вместо двух. Так что стало еще хуже! Вы можете играть с версией FBML здесь: http://jsfiddle.net/pnoeric/4QkbX/2/

Answer 1

docs указывает, что элемент dom должен быть root DOM node, defaults to body. Поэтому я заменяю вызов функции .each одним вызовом метода .parse с созданным элементом DOM. Вот jsfiddle.

FB.XFBML.parse($newhtml[0]); 

Примечание: FB.XFBML.parse() должен быть вызван на родительского элемента виджета, а не непосредственно на сам элемент XFBML.

Answer 2

В моем случае принятое решение не будет работать, потому что сообщения FB добавляются в один и тот же контейнер DOM.

Что я в итоге сделал, запускает в контейнер FB.XFBML.parse(), использует цикл .each и removeClass fb-post, добавляет класс facebook-post-loaded. Затем при последующих вызовах Ajax и выборке новых сообщений fb FB.XFBML.parse() не будет выбирать уже загруженные элементы, так как они больше не имеют класса fb-post.