javascript - AJAX 响应的脚本标签位置错误

Question

我在通过 AJAX 更新页面内容(结果)的网站上遇到问题。此 AJAX 返回的内容中包含一个 script 标记，它呈现 LinkedIN“共享”按钮。

当页面首次加载初始结果集时，布局如下所示:

每个按钮都位于左浮动 div 内，HTML 在 Chrome 开发者工具中如下所示:

正如您所看到的，script 标记出现在它应该出现的位置，即 div 中，并且动态生成的 span 包含按钮就在上面。

现在，当我通过 AJAX 请求附加更多结果时，事情变得有点困惑，如下所示:

正如您所看到的，LinkedIN 按钮完全不合适，在开发人员工具中查看 HTML 时，原因显而易见:

script 标记不在代码文件中出现的 div 内，而是出现在结束 tr 标记之后 - 并且span 按钮就位于上方。

那么，这是为什么，更重要的是，可以采取什么措施来确保 script 标记位于其所属位置，以便布局正确？

仅供引用 - body 的底部是 javascript，它加载 LinkedIn .js 文件，在 AJAX 请求更多结果完成后，会调用 LinkedIn .parse() 方法，该方法是应该解析完整的文档并呈现按钮。

编辑

该应用程序是使用 ASP.NET MVC 构建的，返回的响应使用与初始页面加载相同的 .ascx 控件来格式化结果。

编辑 - 用于检索额外数据的 AJAX 请求

function LoadMore(uri, last, loader, end)
{    
    isLoading = true;
    $(loader).show();
    $.post(uri, function(data)
    {
        if (data != "") 
        {
            $(last).after(data);
            isLoading = false;
            // re-do social media share initialisation on the new AJAX-added content
            gapi.plusone.go('container');
            twttr.widgets.load();
            FB.XFBML.parse();
            IN.parse(document.body);
        }
        else
        {
            $(end).show();;
        }
        $(loader).hide();           
    });
}

编辑

从服务器返回的实际 HTML 是正确的。查看源代码会在正确的位置显示 script 标记，但在 Chrome 开发者工具中查看页面(如上图所示)，会在错误的位置显示 script DOM。 IE9 和 Chrome 中都会出现这种情况。

Answer 1

你是动态构建 html 吗？也许这与错误配置的回调有关。如果您使用 $.ajax({...})，请确保在“success:”属性中指定下一次迭代，以防止无序渲染。