JavaScript:事件触发恢复innerHtml属性

Question

我有一个带有多个按钮的网页。其中一些按钮(我们将其命名为 BA1、BA2...)会在 HttpRequest 之后修改页面元素的 innerHtml 属性，该元素的 id 为“ELEM_ID”，因此从事件触发到事件发生需要一些时间。修改ELEM_ID的innerHtml属性。

当浏览器加载页面时，ELEM_ID的innerHtml有一个默认值，我们将该值称为“VALUE_1”:

<p id="ELEM_ID">VALUE_1</p>

当我按下按钮 BA1 时，一段时间后，该值变为“VALUE_2”

<p id="ELEM_ID">VALUE_2</p>

问题是，当我按下按钮 BA2 时，ELEM_ID.innerHtml 的值返回到 VALUE_1，当 HtmlResponse 准备就绪时，它的值将更改为 VALUE_3。为什么会发生这种情况？

这是一些代码:

var additional_order = [[false,'VAR_1'],[false,'VAR_2'],[false,'VAR_3'],[false,'4'],[false,'VAR_5'],[false,'VAR_6']];
var names = [];
var labelA = "cor_price_visible_";
var labelB = "cor_price_";
names.push("name1");
names.push("name2");
names.push("name3");
names.push("name4");

function updatePrice(n) {
    additional_order[n][0]=!additional_order[n][0];
    var request = "SSID=364c59b135c011c0734893225ab8a8a9";

    for (i = 0; i<additional_order.length;i++) {
        if (additional_order[i][0]) {
            request=request+"&";
            request=request+additional_order[i][1]+'=YES'; 
        }
    }
    var xhttp = new XMLHttpRequest();
    xhttp.onreadystatechange = function() {
        if (this.readyState == 4 && this.status == 200) {
                result = JSON.parse(this.responseText);
            for (i=0;i<result.length;i++) {
                document.getElementById(labelA+names[i]).innerHTML=""+(result[i].toFixed(2));
                document.getElementById(labelA+names[i]).value=(result[i].toFixed(2));
            }
        }
    }

    xhttp.open("POST","services/livepriceservice.php/",true);
    xhttp.setRequestHeader( 'Content-Type', 'application/x-www-form-urlencoded' );
    xhttp.send(request);

}


<button id="BA1" onclick="updatePrice(1)">Press Me!(1)</button>
<button id="BA2" onclick="updatePrice(2)">Press Me!(2)</button>
...

编辑1:调试我注意到问题的原因是 jquery.js 脚本中执行了某些内容(有一个函数可以恢复节点属性的默认值)，但没有显式调用任何内容。

编辑2:该功能是:

html: function(a) {
        return S(this, function(a) {
            var b = this[0] || {}
              , c = 0
              , d = this.length;
            if (void 0 === a && 1 === b.nodeType)
                return b.innerHTML;
            if ("string" == typeof a && !za.test(a) && !la[(ja.exec(a) || ["", ""])[1].toLowerCase()]) {
                a = r.htmlPrefilter(a);
                try {
                    for (; c < d; c++)
                        b = this[c] || {},
                        1 === b.nodeType && (r.cleanData(ma(b, !1)),
                        b.innerHTML = a);
                    b = 0
                } catch (e) {}
            }
            b && this.empty().append(a)
        }, null, a, arguments.length)
    }

Answer 1

尝试调试 dom 更改并在子树或属性更改上获取断点。