当前和ajax请求加载的页面上相同的div id会造成问题吗？

Question

我正在使用facebook编程，它需要保留<div id="fb-root" ></div>。

在我的第一页，我执行facebook登录通过按钮点击，这需要以上的div被保留。这没什么问题。

现在，当用户单击index.php上的按钮时，通过ajax新页面将url.php加载到index.php页面上的<div>中。此url.php页面包含facebook注释框的代码。哪个再次使用<div id="fb-root" ></div>.，因此在index.php和url.php上都有相同的div会造成问题？

当我错误地加载url.php时，facebook comment box将正确显示，但当我首先加载index.php并通过ajax请求时，url.php就不会出现。

以下是url.php上facebook注释框的代码：

   <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=9549";
  fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script>

<div class="fb-comments" data-colorscheme="light" data-width="470" style="z-index: 1; left: 420px; top: 560px; "  ></div>

而index.php

<div id="fb-root"></div>
<script type="text/javascript">
window.fbAsyncInit = function() {
FB.init({
    appId: '<?php
echo $appId;
?>',
    cookie: true,
    xfbml: true,
//  channelUrl: '<?php
echo $return_url;
?>channel.php',
    oauth: true});}; .....

更新

执行ajax调用的代码：

 if (response.status === "connected")
        {
            LodingAnimate(); 
            FB.api('/me?fields=movies,email', function(mydata) {
            console.log(mydata.email);

            //alert("json-5");
            var json = JSON.stringify(mydata.movies.data);
        //    alert(mydata.movies);
            var a = JSON.parse(json);       
            $.post('movies_db.php',{'myd':a}, function(data) 
            {
                $.ajax({
            url:'url.php'
            ,async:     true
            ,cache:     false
            ,dataType:  'html'
            ,success:   function(data){
                $('body').html(data);
                    }
        });        
            });
        console.log(data);

              }); //--
         } //if

Answer 1

您可以做的是从用于加载注释框的<div id="fb-root" ></div>页面中删除该url.php。相反，使用ajax FB.XFBML.parse();或callback方法中的success函数来使用现有的div呈现注释框。

jQuery示例：

$.post( 'url.php', data, function( response ) {
    $('.comment-box').html( response );
    FB.XFBML.parse();
}, 'html' );

FB.XFBML.parse();函数将呈现注释框和页面上的任何其他Facebook元素。