Question

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

我在某些html元素上没有正确更新文本时出现问题，特别是按钮和列表框（选择/选项）。它应该自动执行，但有时文本只是坚持其以前的值。文本或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 IS已更改，由警报消息验证。所以一切都“保持工作”，但是用户不会知道他们实际点击了什么，因为按钮的文字看不到变化。

我通过使用＆lt;修正了这个问题。 span＆gt;作为按钮的innerHTML，并将span的innerHTML更改为数组中的值。这样做：每次更改innerHTML时，它都会在屏幕上显示。虽然我有一个解决方案，但它只是一个解决方案，我很好奇是什么原因造成的？

我的列表框有类似的问题。默认值为“每日”。（见下面的完整代码）。

document.getElementById("interval_list").selectedIndex

和

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

同样，在函数内部，值始终是正确的，但即使函数说selectedIndex为3（应该是“never”），下拉文本仍保持每日。我无法通过添加＆lt;来解决这个问题。 span＆gt;在任何地方，所以在这里我被卡住了。

一些评论：

html中没有重复的ID（用于查找）
我对页脚中的按钮没有这个问题，也从不使用段落，跨度或标题。
我尝试在小提琴和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>

Answer 1

<强>的document.getElementById（ “BTN”）。innerHTML的=

注意你的情况 - HTML应该是大写的。

Answer 2

更多评论而不是答案。使用以下代码：

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

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

与您的选择问题相同，以下适用于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>

执行innerHTML后，按钮上的文本不会更改

2 个答案: