У меня есть большая страница с кнопкой «загрузить еще» внизу; каждый щелчок по «загрузить больше» загружает больше контента через 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>
<div class="fb-comments" data-href="http://mysite.com/a<?=$x ?>" data-width="435"></div>
После загрузки дополнительного контента я могу попросить Facebook повторно проанализировать всю страницу с помощью FB.XFBML.parse();
(что приводит к тому, что эти элементы div превращаются в настоящие кнопки «Нравится» и формы комментариев). Это работает отлично, однако сразу становится медленным, поскольку Facebook повторно анализирует контент, который уже был на странице, а не только новый контент. Каждый раз, когда пользователь нажимает «загрузить еще», он анализирует всю страницу, поэтому функция FB делает все больше и больше.
А теперь хорошие новости: документы для синтаксического анализа FB говорят, что вы можете попросить Facebook проанализировать только один элемент. Итак, я подумал: ладно, когда пользователь нажмет «загрузить еще», я оберну этот свежий HTML в уникальный div
, затем использую jQuery, чтобы просмотреть div
, найти все теги 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
newDivName = "d"+String(new Date().valueOf());
var $newHtml = $("<div id='"+newDivName+"'>"+html+"</div>");
// append it to existing content, and tell Isotope
c.append($newHtml);
if(c.hasClass('isotope-loaded')) { c.isotope( 'appended', $newHtml ); }
// walk through new HTML and get all Facebook "like" buttons and parse them
$('#'+newDivName+' .fb-like').each(function() {
console.log('xfbml parsing .'+this.attr('class')+' and data-href '+this.attr('data-href'));
FB.XFBML.parse(this);
});
}
}
});
});
Но я получаю: Uncaught TypeError: Object #<HTMLDivElement> has no method 'attr'
(что говорит мне, что мой each() работает неправильно)... почему?
ОБНОВЛЕНИЕ: ответ найден ниже, чтобы решить эту проблему, но он все еще не работает. См. новый вопрос: FB.XFBML.parse() для отдельного элемента делает ничего