Question

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

Answer 1

似乎在于回调函数的时间。如果你把它拿出来，一切都按照预期在IE中运行：

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

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

Answer 2

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

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

修改

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

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

Answer 3

尝试更改行

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

到

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

IE9没有反映javascript对页面的更改

3 个答案: