2012-04-18 55 views
1

我正在使用jQuery來改變頁面元素,並且代碼似乎正在運行(成功),但頁面實際上並沒有立即更新。在Chrome中一切都很穩定,但IE9很奇怪。IE9並不反映頁面javascript的變化

的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.警報popup 3.等待,直到用戶點擊隨機物品 4.更新頁面

任何想法?

編輯:添加HTML和調用該函數的事件。

+0

時,這種功能被調用?它與之交互的頁面的HTML是什麼? – 2012-04-18 21:31:56

+0

它是否在沒有警報的情況下工作? IE真的不喜歡做警報 – 2012-04-18 21:33:06

+0

@thantos從問題:「另外,警報只是爲了調試;這發生在我把它添加到那裏之前。」 – 2012-04-18 21:33:27

回答

0

您是否有多個ID爲的元素總和? Chrome可能會選擇第一個,而IE正在選擇另一個(或根本沒有)。

我不得不挖掘我的網絡安全書,但我記得他們處理這種情況的方式不同。

編輯:

只是測試this jsFiddle在Chrome和IE7-9與您所提供的代碼(當然要去掉的AJAX調用),它工作正常。

因此,無論你的AJAX調用在IE中失敗(不太可能),或者你有我看不到的語法錯誤。

+0

不,只是將IE呈現的頁面複製到記事本中,並搜索單詞「sum」,它只出現一次。 – 2012-04-18 21:41:03

+0

需要查看原始HTML。至少包含「.Hours」類的元素的HTML – Terry 2012-04-18 21:46:14

+0

對不起,我現在添加了它。 – 2012-04-18 21:51:20

2

它似乎在於回調函數的時間。如果你把那件出來,一切都按預期在IE中:

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

我知道後很可能產生要添加的輸入在一起,只是想幫助確定問題。

+0

我試圖編輯出代碼中不相關的部分,以便更容易理解,但是您是正確的。如果用戶試圖在小時文本框中輸入一個無效的金額,控制器會發回一個javascript值用來替換錯誤值,updateSum必須在錯誤值被替換後發生,所以它必須發生在控制器已經響應後,在回調函數中。 – 2012-04-18 22:09:43

+0

@JustinToman May以及發佈代碼的代碼,雖然它似乎不太可能會成爲問題的原因,但是我看不到/認爲迄今爲止發佈的代碼有任何問題 – 2012-04-18 22:18:29

+0

試試這個http: //jsfiddle.net/sepsJ/在IE9中,它不像我在頁面上做所有額外的東西時那樣可重複,但是這是一個更全面的方式,它的全部工作原理。 inpu t字段後,你改變的東西。這應該防止更改事件被調用。儘管如此,tabbing似乎也觸發了它。 – 2012-04-18 22:55:14

0

嘗試改變線

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

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

不必要的函數調用來修復一個似乎與問題無關的代碼行中不存在的問題。 – 2012-04-18 22:00:32

+0

我測試了這個代碼,它工作正常。你,帕夫? – 2012-04-18 22:01:11

+0

是的,這是完全冗餘的語法,與問題無關。 – Terry 2012-04-18 22:02:01