AJAX响应在错误的位置有脚本标记

Question

我在网站上遇到问题，其中页面内容（结果）通过AJAX更新。此AJAX返回的内容中包含一个脚本标记，用于呈现LinkedIN“共享”按钮。

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

这些按钮中的每一个都位于左侧浮动 div 中，HTML开发人员工具中的HTML如下所示：

正如您所看到的那样，脚本标记出现在 div 的位置，以及动态生成的 span 按钮就在上面。

现在，当我通过AJAX请求添加更多结果时，事情变得有点乱，看起来像这样：

正如您所看到的，LinkedIN按钮不合适，在查看开发人员工具中的HTML时，原因很明显：

脚本标记不在 div 中，它出现在代码文件中，而是出现在关闭 tr 标记之后 - 并且 span ，按钮位于上方。

那么，为什么会这样，更重要的是可以做些什么来确保脚本标记所在的位置，以便布局正确？

仅供参考 - 在正文的脚下是加载LinkedIn .js文件的javascript，在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是正确的。查看源代码会在正确的位置显示脚本标记，但在Chrome开发人员工具中查看该页面（如上图所示）会将脚本显示在错误的位置DOM。这种情况发生在IE9和Chrome中。

Answer 1

您是否动态构建html？也许它与错误配置的回调有关。如果您使用$ .ajax（{...}），请确保将下一次迭代指定到“success：”属性中以防止无序渲染。

Answer 2

像这样使用ajax调用

$.ajax({ url: 'url',
                type: 'POST',
                data: json,
                dataType: 'json',
                contentType: 'text/html',
                success: function (data) {

                    //you response will be data


                }

            });