IE9 不反映 javascript 对页面的更改答案

【问题标题】：IE9 Doesn't reflect changes to page by javascriptIE9 不反映 javascript 对页面的更改
【发布时间】：2012-04-30 09:25:32
【问题描述】：

我正在使用 jQuery 来更改页面元素，并且代码似乎正在运行（成功），但页面实际上并没有立即更新。 Chrome 中的一切都很稳定，但 IE9 很奇怪。

JavaScript：

$(document).ready(function() {
    $('body').on('change', '.Hours', function () {
        var hoursElement = this;
        this.value = Math.ceil(this.value * 4) / 4;
        $.post("/Log/UpdateWorkItemHours", { 
        //valid arguments
        }, function (hours) { 
            hoursElement.value = hours;
            updateSum(); 
        });
    });
});

function updateSum() {
    var sum = 0;
    $('.Hours').each(function () {
        sum += parseFloat($(this).val());
    });
    $('#sum').text("Total Hours: " + sum);
    alert(sum);
}

HTML：

<input type="text" class="numeric Hours" value="4"   />
<input type="text" class="numeric Hours" value="4"   />
<input type="text" class="numeric Hours" value="21"   />

<span class="numeric" id="sum">Total Hours: 0</span>

我的警报发生在（在代码中）#sum 的内容应该更改之后，并且它显示正确的数字，但是，直到我在页面周围随机单击或使用选项卡更改焦点后页面才会更新次。此外，警报仅用于调试；这是在我添加之前发生的。

代码顺序： 1.算出总和 2.更新页面 3. 弹出警报

执行顺序： 1.算出总和 2.弹出警报 3.等到用户随机点击东西 4. 更新页面

有什么想法吗？

编辑：添加了 HTML 和调用该函数的事件。

【问题讨论】：

这个函数什么时候被调用？与之交互的页面的 HTML 是什么？
在没有警报的情况下是否可以工作？ IE 真的不喜欢做警报
@thantos 来自问题：“另外，警报仅用于调试；这是在我添加它之前发生的。”
IE什么时候“不喜欢做警报”了？
@AnthonyGrist，我更新了它以包含 html 和调用函数的位置。

标签： javascript jquery html google-chrome internet-explorer-9

【解决方案1】：

似乎在于回调函数的时机。如果你把那块拿出来，一切都在 IE 中按预期工作：

$('body').on('change', '.Hours', function () {
    this.value = Math.ceil(this.value * 4) / 4;
    updateSum();
});

我意识到该帖子可能会创建要添加在一起的输入，只是试图帮助查明问题。

【讨论】：

我试图编辑掉代码中不相关的部分以使其更容易理解，但是是的，你是对的。如果用户尝试在小时文本框中输入无效数量，控制器将发回一个值，javascript 使用该值来替换错误值。 updateSum 必须在替换坏值之后发生，所以它必须在控制器响应之后发生，这在回调函数中。
@JustinToman 也可以发布执行替换的代码。虽然这似乎不太可能是问题的原因，但我看不出/认为您到目前为止发布的代码有任何问题。
在 IE9 中试试这个jsfiddle.net/sepsJ。它不像我在页面上使用所有额外的东西那样可重复，但这是它所有工作方式的更完整的画面。更改某些内容后，直接单击输入字段的右侧。这应该可以防止调用更改事件。不过，Tab 似乎会触发它。
怎么可能是回调时机？它显示应更新总和后发生的警报。这意味着函数运行了，并且它超过了应该更新总和的部分。我最困惑的部分是：如何调用警报但页面没有改变？

【解决方案2】：

您是否有多个 ID 为 sum 的元素？ Chrome 可能会选择第一个，而 IE 会选择另一个（或根本没有）。

我必须翻阅我的网络安全书，但我记得读过他们处理这种情况的方式不同。

编辑：

刚刚使用您提供的代码（当然减去 AJAX 调用）在 Chrome 和 IE7-9 中测试了 this jsFiddle，它工作正常。

所以要么你的 AJAX 调用在 IE 中失败（不太可能），要么你有我看不到的语法错误。

【讨论】：

没有，只是将IE渲染的页面复制到记事本中，搜索“sum”这个词，只出现了一次。
需要查看原始 HTML。至少包含带有.Hours 类的元素的 HTML

【解决方案3】：

换行试试

this.value = Math.ceil(this.value * 4) / 4;

到

$(this).val(Math.ceil($(this).val() * 4) / 4;)

【讨论】：

用看似与问题无关的代码行来修复不存在的问题的不必要的函数调用。
是的，这完全是多余的语法，与问题无关。