JavaScript：触发事件恢复 innerHtml 属性

Posted 2023-05-07

【中文标题】JavaScript：触发事件恢复 innerHtml 属性

【英文标题】：JavaScript: Firing of events restores innerHtml property

【发布时间】：2017-10-27 10:08:42

【问题描述】：

我有一个带有多个按钮的网页。其中一些按钮（我们将它们命名为 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)
    

【问题讨论】：

嗨，你有现场的例子吗？

尝试逐步调试您的BA2点击究竟发生了什么

@DanilGholtsman 调试我注意到问题的原因是执行 jquery.js 脚本中的某些内容（有一个函数可以恢复节点属性的默认值），但没有显式调用。

而onreadystatechange 是您在此范围内获得的唯一事件？

@DanilGholtsman 有

【参考方案1】：

尝试调试dom变化并在子树上获取断点，或者属性变化。

【讨论】：

这是我已经做过的^^...元素被jquery.js的一个函数修改了，我正在修改问题写下这个函数。