3

使用 JQuery 时，如果您使用 javascript 更改它们的值，某些 ui 元素（例如下拉框或按钮）将不会自动更新它们的 ui。尽管该值已正确更新，但在屏幕上看起来没有任何变化。为了解决这个问题，Jquery 需要在更改值后使用“刷新”方法。在此页面上，您可以找到信息和语法：http: //jquerymobile.com/test/docs/forms/docs-forms.html（向下滚动到“刷新表单元素）

我遇到了一些 html 元素上的文本没有正确更新的问题，尤其是按钮和列表框（选择/选项）。它应该自动执行此操作，但有时文本只是坚持其先前的值。text 或 innerHTML 的值是正确的，只是不可见。

这是按钮的问题。我使用Javascript来获取innerHTML并对其进行更改。

HTML 标记：

<button id="btn" onclick"simple_function">A</button>

Javascript：

function simple_function()
{
    var anArray = aFunctionThatReturnAnArray();
    document.getElementById("btn").innerHTML = anArray[0];
}

通过使用警报消息，我可以看到更改前后的值。这些警告信息是正确的：点击后的值确实是anArray[0]的值，但是我浏览器中按钮的文本没有改变，它停留在“A”上。这个按钮令人沮丧的是，有时文本确实会发生变化，但只是在我第一次更改 html 时（这发生在第一次向用户显示按钮之前）。之后对该函数的其他调用不再更改文本。然而，innerHTML 发生了变化，正如警报消息所证实的那样。所以一切都在“工作”，但用户不会知道他们实际点击的是什么，因为按钮的文本是不可见的改变。

我通过使用 < span > 作为按钮的 innerHTML 并将 span 的 innerHTML 更改为数组中的值来解决此问题。这有效：每次更改 innerHTML 时，它都会在屏幕上可见。虽然我有一个解决方案，但这只是一种解决方法，我很好奇可能导致这种情况的原因是什么？

我对列表框有类似的问题。默认值为“每天”。（请参阅下面的完整代码）。

document.getElementById("interval_list").selectedIndex

和

document.getElementById("interval_list").selectedIndex = 3;

同样，在函数内部，值始终是正确的，但即使函数显示 selectedIndex 为 3（应该是“从不”），下拉菜单的文本也会每天保持不变。我无法通过在任何地方添加 < span > 来解决这个问题，所以我被卡住了。

一些备注：

  • html中没有重复的id（用find来检查）
  • 页脚中的按钮没有这个问题，段落、跨度或标题也没有。
  • 我尝试在 fiddle 和 wc3 的 tryit 编辑器中复制类似的代码：它在那里工作。所以它一定是简单功能之外的东西把它弄坏了？
  • 检查浏览器兼容性：这不是问题（我不使用 IE）。

列表框完整代码：

        <div class="ui-grid-a">

            <div class="ui-block-a">

                <p style="padding-right: 1em; padding-top: 0.4em;" align="right">AUTO REMIND</p>
                <p style="padding-right: 1em; padding-top: 1em;" align="right">INTERVAL</p>

            </div>

            <div class="ui-block-b">

                <div id="auto_remind_radio_buttons" data-role="controlgroup" data-type="horizontal">

                    <input type="radio" onclick="document.getElementById('interval_list').selectedIndex = 0;" name="auto_remind_button" id="auto_remind_on" value="male"/>
                    <label for="auto_remind_on"><img src="images/correct.png" alt="NO" width="26" height="21"></label>
                    <input type="radio" onclick="document.getElementById('interval_list').selectedIndex = 3;" name="auto_remind_button" id="auto_remind_off" value="female"/>
                    <label for="auto_remind_off"><img src="images/wrong.png" alt="NO" width="26" height="21"></label>

                </div>

                <select id="interval_list" name="Single-line ListBox example">

                    <option id="1" value="1">daily</option>
                    <option id="2" value="2">weekly</option>
                    <option id="3" value="4">monthly</option>
                    <option id="4" value="5">never</option>

                </select>

            </div>

        </div>
4

2 回答 2

2

document.getElementById("btn").innerHTML=

注意你的案例——HTML 应该大写。

于 2012-12-14T05:48:56.033 回答
0

评论多于回答。使用以下代码：

<button id="b0">b0</button>
<button id="b1" onclick="
  document.getElementById('b0').innerHTML = 'foo';
">click me</button>

FF 和 IE 8 中按钮的 innerHTML 变化，您使用的是什么浏览器？

与您的选择问题相同，以下适用于 IE 8 和 FF：

<select id="sel0">
  <option>Sunday
  <option>Monday
  <option>Tuesday
  <option>Wednesday
</select>

<button onclick="
  document.getElementById('sel0').selectedIndex = 1;
">Select Monday</button>

<button onclick="
  document.getElementById('sel0').selectedIndex = 3;
">Select Wednesday</button>
于 2012-12-14T06:30:05.303 回答