使用Ajax调用追加div仅在第一次加载时起作用

Question

我使用YQL + jQuery从远程页面获取内容，我可以在第一个页面加载中加载内容但是在点击页面菜单后返回到未附加div的同一页面。

我能够使用ele.html（ele.html（））实现刷新，我的代码如下：

$(document).ready(function() {
$("#divAjaxLoading").show();
$.ajax({
    type: 'GET',
    url: "https://query.yahooapis.com/v...",
    dataType: 'xml',
    success: function (data) {
        var result = $(data).find('results').find('.content');
        //debugger;
        $('#Home_CP_Home').html(result);
        $("#Home_CP_Home").html($("#Home_CP_Home").html());
        $("#divAjaxLoading").hide();
    }
    });
});

Answer 1

您的结果来自纯XML，它是一个XmlDocument实现并包含XmlElement实现。

您的页面是HtmlDocument实现并解释HtmlElement，而不是纯XmlElement。

选项1，将Document转换为字符串，让jQuery解析它有一个HtmlDocument：

success: function (data) {
    var result = $(data).find('results').find('.content');
    $('#Home_CP_Home').html(new XMLSerializer().serializeToString(result[0]));
    $("#divAjaxLoading").hide();
}

选项2，遍历XmlDocument以在HtmlDocument中创建相同的元素：

function convertHTML(input, output) {
    switch (input.nodeType) {
    case Node.ELEMENT_NODE:
        var i;
        var newelt = document.createElement(input.tagName);
        for (i = 0 ; i < input.attributes.length ; i++) {
            newelt.setAttribute(input.attributes[i].name, input.attributes[i].value);
        }
        for (i = 0 ; i < input.childNodes.length ; i++) {
            convertHTML(input.childNodes[i], newelt);
        }
        output.appendChild(newelt);
        break;
    case Node.TEXT_NODE:
        output.appendChild(document.createTextNode(input.nodeValue))
        break;
    }
    return output;
}

然后使用它：

success: function (data) {
    var result = $(data).find('results').find('.content');
    convertHTML(result[0], $("#Home_CP_Home").empty()[0])
    $("#divAjaxLoading").hide();
}

Answer 2

因为我正在使用ASP.NET项目，所以控件具有属性runat =“ server ”，通过删除该属性使其成为普通的html div后，我在回发后附加了div。

谢谢