1

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

4

3 回答 3

2

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

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

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

于 2012-04-18T21:58:01.097 回答
0

换线试试

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

至

$(this).val(Math.ceil($(this).val() * 4) / 4;)
于 2012-04-18T21:58:31.483 回答
0

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

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

编辑：

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

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

于 2012-04-18T21:37:33.257 回答