javascript - IE9 不反射(reflect) javascript 对页面的更改

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

我正在使用 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 和调用函数的事件。

最佳答案

好像是回调函数的时机问题。如果你把那 block 拿出来,一切都在 IE 中按预期工作:

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

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

关于javascript - IE9 不反射(reflect) javascript 对页面的更改,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/10218338/

相关文章:

javascript - 试图捕获在 jQuery 中选择了哪个按钮

html - 垂直居中 CSS 中的 "float:right"元素

javascript - 具有多个参数的客户端预测搜索相关性计算

javascript - 如何检测 Chrome 中的弹出窗口拦截器?

php - 通过ajax jquery从数据库输出数据

jquery - 带有验证引擎的 AJAX 联系表单 - jQuery

javascript - 为什么 window.history.back() 会跳回两个状态?

java - 为了使用 Java 提交表单,在表中使用输入框的最佳方式是什么?

javascript - 为什么我不能将图像源设置为来自 Javascript 的 blob?

javascript - 仅使用常量的静态 JavaScript 函数是否会被编译为常量