jQuery：多個ajax調用具有不同順序和響應的響應。body使對象失去與DOM元素的鏈接

Question

我正在進行一些很奇怪的事情，似乎無法弄清楚。

我有2個ajax調用，這些調用使我獲取一些html，這些html必須寫入具有傳遞的ElementID的元素或文檔主體中。 如果兩個響應都以與發出呼叫相同的順序返回，則沒有問題。 如果兩個響應都必須寫入通過ID獲得的Element，則也沒有問題。

但是，如果響應以與啟動順序不同的順序返回，並且其中一個響應被寫入文檔主體，則容器對象似乎失去了與DOM元素的鏈接。

這是JS小提琴： JS小提琴

您會發現，如果您進行更改

Resengo({
    CompanyID: '350034',
    Call: 'B',
    Time: '60',
    ElementID: 'B'
});

至

Resengo({
    CompanyID: '350034',
    Call: 'B',
    Time: '60'
});

，其響應不會寫入頁面，而pageContainer已完全失去與其DOM元素的鏈接。

編輯：當然，可以通過更改輕松地解決此問題

function renderWidget(html) {
    if (pageContainer) {
        pageContainer.innerHTML += html;
        console.log(pageContainer);
    } 
}

至

function renderWidget(html) {
    if (settings.ElementID) {
        pageContainer = document.getElementById(settings.ElementID);
    }
    if(pageContainer) {
        pageContainer.innerHTML += html;
        console.log(pageContainer);
    } 
}

但我對此為什么不起作用感到好奇，因為這似乎不合邏輯

編輯2：這是相關的javascript

var Resengo = (function () {

// constructor
var Resengo = function resengo(settings) {

    jQuery = window.jQuery;
    getWidget();

    // private class variable
    var settings = settings;
    var pageContainer;

    function getWidget() {
        jQuery(document).ready(function ($) {
            /******* Create and add loader *******/
            if (settings.ElementID) {
                pageContainer = document.getElementById(settings.ElementID);
            } else {
                pageContainer = document.body;
            }

            /******* Load HTML *******/
            var url;
            if (settings.ElementID) {
                carouselWidth = $('#' + settings.ElementID).outerWidth();
            }
            if (settings.ElementID) {
                carouselHeight = $('#' + settings.ElementID).outerHeight();
            }
            if (settings.Time) {
                doOpenReservationPopup = settings.Time * 1000;
            }
            if (settings.Language) {
                language = settings.Language;
            }

            url = '/echo/html/';
            var delay = 0;
            if(settings.Call == 'A') {
                delay = 1;
            }
            $.ajax({
                url: url,
                type: 'POST', // form submit method get/post
                data: {
                    html: "<p>Text echoed back to request</p>",  
                    delay: delay
                },
                dataType: 'html', // request type html/json/xml
                success: function (data) {
                    renderWidget(data);
                }
            });                
        });
    };
    function renderWidget(html) {
        if (pageContainer) {
            pageContainer.innerHTML += html;
            console.log(pageContainer);
        } 
    }
};

return Resengo;

})();
Resengo({
    CompanyID: '350034',
    Call: 'A',
    ElementID: 'A'
});
Resengo({
    CompanyID: '350034',
    Call: 'B',
    Time: '60',
    ElementID: 'B'
});

和相關的html：

<body bgcolor="#999999">
<div id="Feedbacks">

</div>
<br /><br />
<div id="A">

</div>
<div id="B">

</div>    
</body>

Answer 1

但是，如果響應以與啟動順序不同的順序返回，並且其中一個響應被寫入文檔主體，則容器對象似乎失去了與DOM元素的鏈接。

是的，這是因為設置節點的innerHTML屬性時，將刪除所有子節點，解析HTML字符串，並從中創建新節點。
因此，對body子節點的所有引用均被破壞。 節點不只是相同，因為它們碰巧具有相同的id屬性或其他屬性。

 var div1 = document.getElementById('test'); document.body.innerHTML = '<div id="test">Test</div>'; var div2 = document.getElementById('test'); document.write(div1 == div2);

 <div id="test">Test</div>

在JS中對對象進行JSON序列化和反序列化時，基本上發生了相同的事情：

 var obj = { 'a': 'AAA' }; var obj2 = JSON.parse(JSON.stringify(obj)); obj.b = 'BBB'; document.write(JSON.stringify(obj2));

為什么不打印{"a":"AAA", "b":"BBB"} ？
因為obj和obj2是兩個不同的對象。

jQuery：多個ajax調用具有不同順序和響應的響應。body使對象失去與DOM元素的鏈接

問題描述

1 個解決方案

解決方案1
1 已采納 2015-08-14 09:01:09

jQuery：多個ajax調用具有不同順序和響應的響應。body使對象失去與DOM元素的鏈接

問題描述

1 個解決方案

解決方案1 1 已采納 2015-08-14 09:01:09

解決方案1
1 已采納 2015-08-14 09:01:09