Facebook 社交插件和 jQuery 问题 [英] Facebook Social Plugin and jQuery Issue

问题描述

我正在使用 jQuery 将一些内容加载到我正在开发的 Web 应用程序中的类似灯箱的 div 中.使用 $POST，我正在调用一个动态填充的页面，该页面包含一个 youtube 视频和一个 facebook 评论插件.

I'm using jQuery to load some content into a lightbox-like div in a web app I'm working on. Using $POST, I'm calling a dynamically populated page that holds a youtube video and a facebook comment plugin.

我加载的第一个视频带有评论，但之后的每个视频都是独立的，没有评论.关于可能会发生什么的任何快速想法?

The first video I load comes with the comments, but each video after that comes by itself, sans-comments. Any quick ideas as to what might be happening?

这是我正在加载的页面.

This is the page I'm loading.

<? $video_id = $_POST['video_id']; ?>

<object width="800" height="499"> 
    <param name="movie" value="http://www.youtube.com/v/<? echo $video_id; ?>?modestbranding=1&amp;version=3&amp;hl=en_US&rel=0"></param> 
        <param name="allowFullScreen" value="true"></param> 
        <param name="allowscriptaccess" value="always"></param> 
    <embed src="http://www.youtube.com/v/<? echo $video_id; ?>?modestbranding=1&amp;version=3&amp;hl=en_US&rel=0" type="application/x-shockwave-flash" width="800" height="499" allowscriptaccess="always" allowfullscreen="true"></embed> 
</object>


<h5 style="margin:35px 0 8px 0;">Comment on this Video</h2>
<div id="fb-root"></div>
<script>(function(d, s, id) {
  var js, fjs = d.getElementsByTagName(s)[0];
  if (d.getElementById(id)) return;
  js = d.createElement(s); js.id = id;
  js.src = "//connect.facebook.net/en_US/all.js#xfbml=1&appId=158242874284543";
  fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script>

<div class="fb-comments" data-href="http://XXXXXXXXXXXX.com/viewvideo.php?video_id=<? echo $video_id; ?>" data-num-posts="12" data-width="800"></div>

这是引入它的调用(#view_video 是保存灯箱的 div，.video_wrapper 是显示加载信息的 div.每个缩略图都在一个带有 videothumb 类的 div 中，其 id 是设置为 youtube 视频的唯一 ID):

And this is the call that brings it in (#view_video is the div that holds the lightbox, .video_wrapper is the div that displays the info that is loaded. Each thumbnail is in a div with the videothumb class, whos id is set to the youtube videos unique id):

<script>
    //VIEW VIDEO
    $('.videothumb').click(function() {
        $('#view_video').fadeIn('fast');
        this_video_id = $(this).attr('id');
        $.post( 'viewvideo.php', { video_id: this_video_id },
            function( data ) {
                //on complete
                $('.video_wrapper').html(data);
            }
        );
    });
</script>

谢谢！！！

推荐答案

当您加载第一页时，Facebook JS SDK 也会被加载，并解析文档中的 XFBML 标签.

When you load the first page, the Facebook JS SDK get’s loaded as well, and parses the XFBML tags in your document.

下次您通过 AJAX 将页面加载到文档中时，JS SDK 已经嵌入到您的文档中，因此不会再发生任何事情 - 并且不包括对 XFBML 标签的新解析.

The next time you AJAX-load a page into your document, the JS SDK is already embeded into your document, so nothing further happens – and that includes no new parsing of XFBML tags.

你必须使用 FB.XFBML.parse 告诉 SDK 它应该再次搜索文档以查找(动态添加的)XFBML 标签.(最好给它一个 DOM 节点作为第一个参数，这样它就不会再次搜索整个文档，而只搜索发生动态变化的部分.)

You have to use FB.XFBML.parse to tell the SDK that it should again search the document for (dynamically added) XFBML tags. (Preferable give it a DOM node as first parameter, so that it does not search the whole document again, but just the part where dynamic changes have occured.)

这篇关于Facebook 社交插件和 jQuery 问题的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！