innerHTML 不刷新 IE9 上的显示

Question

初学者 Javascript 问题。

当我设置一个元素的 innerHTML 字段时 - 它不会引用显示，直到我在页面中上下滚动。这只发生在 IE9 中

这是我的代码：

<ul id="zzz">
<li>
    <input title="Delete" name="DeleteFiles" value="a5e342fd-9180-416b-9938-e66218f275ee"
        id="DeleteCb" onchange="SetDelete(DeleteCb,DeleteLabel)" type="checkbox">  <span id="DeleteLabel" > </span>
    <a href="MyJavaTest_files/_MG_0126.jpg">_MG_0126.jpg</a>
    <br>
    <img style="max-width: 400px;" src="MyJavaTest_files/_MG_0126.jpg">
</li> </ul>

<script type="text/javascript">
SetDelete = function (checkBox, Label) {
    if (checkBox.checked)
        Label.innerHTML="<B>Delete<B>";
    else
        Label.innerHTML = "";}</script>

这是我点击时的样子：

这里是它在我最小化和最大化之后的样子，或者其他任何会导致它重新绘制该区域的东西。

我也尝试了 jQuery HTML 并得到了相同的行为。

Answer 1

您需要使用document.getElementById，因为您传递的是id 值而不是节点本身：

SetDelete = function (checkBox, Label) {
    var checkbox = document.getElementById(checkBox);
    var Label = document.getElementById(Label);
    if (checkBox.checked)
        Label.innerHTML="<B>Delete<B>";
    else
        Label.innerHTML = "";
}

并在调用时使用引号：

onchange="SetDelete('DeleteCb', 'DeleteLabel')"

---

还要避免使用变量名，例如Checkbox、Label、Submit、Button 等，因为它们会产生难以找到的问题。