奇怪的問題......IE8的jQuery用古怪。點擊()和阿賈克斯()函數這裏
UPDATE
增加了更多服務器端的調試之後,我發現handleLookupButton($("#select-circuit").val());
和handleLookupButton($(this).text());
都使用相同的值調用ajax函數。
問題是handleLookupButton($("#select-circuit").val());
不等待服務器結果。它只是吹過ajax循環,沒有發生,沒有成功,沒有錯誤。
服務器完成ajax函數稍後調用的頁面就好了,顯然ajax函數不再監聽它。我還沒有想出一個決議。再次,這隻發生在IE8上。
結束時更新
考慮下面的JSP代碼片段
<div id="main-controls" class="main-controls ui-widget ui-corner-all" align="center" style="padding-top: 5px;">
<form action="#" id="lookupForm">
<div align="right" style="padding-right: 10px; padding-bottom: 5px;">
<label id="select-circuit-label" class="select-label" style="font-size: 8pt; font-weight: bold">Circuit:
<input type="text" id="select-circuit" class="main-select" style="font-size: 8pt; height: 13px; width: 100px;">
</label>
<label id="select-ne-label" class="select-label" style="font-size: 8pt; font-weight: bold">NE:
<input type="text" id="select-ne" class="main-select" style="font-size: 8pt; height: 13px; width: 100px;" disabled="disabled">
</label>
<label id="select-customer-label" class="select-label" style="font-size: 8pt; font-weight: bold">Customer:
<input type="text" id="select-customer" class="main-select" style="font-size: 8pt; height: 13px; width: 100px;" disabled="disabled">
</label>
</div>
<div align="center">
<button id="lookup-button" class="lookup-button ui-widget" >Lookup</button>
</div>
</form>
</div>
<br></br>
<div id="lookup-history-container" class="ui-widget ui-widget-content ui-corner-all" align="center" style="font-size: 8pt; overflow: auto;">
<b>Lookup History</b>
<hr class="ui-widget ui-corner-all ui-header" width="80%">
<br>
<div align="left">
<ul id="lookup-history-list">
</ul>
</div>
</div>
<div id="favorites-container" class="ui-widget ui-widget-content ui-corner-all" align="center" style="font-size: 8pt; overflow: auto;">
<b>Favorites</b>
<hr class="ui-widget ui-corner-all ui-header" width="80%">
<br>
<div align="left">
<ul id="favorite-list" style="padding:2px; margin:2px; border-bottom: thin;">
<c:if test="${fn:length(favorites)> 0}">
<c:forEach var="favorite" items="${favorites}">
<c:set var="companyTrimed" value="${favorite.company}"/>
<li>
<b><span class="past-lookup-circuit"><c:out value="${favorite.circuit}" /></span></b>
<span class="delete-favorite-icon ui-icon ui-icon-trash"
style="width: 14px; float: right;"
title="DELETE this Favorite"
circuit='<c:out value="${favorite.circuit}" />'
>
</span><br>
<span class="lightly-darkened" style="padding-left: 20px;"><c:out value="${fn:substring(companyTrimed,0,20)}" />...</span>
</li>
</c:forEach>
</c:if>
</ul>
</div>
</div>
我有以下的jQuery代碼
// This is to look up a circuit
$("#lookup-button").live("click", function() {
handleLookupButton($("#select-circuit").val());
});
// Handle loading from history
$(".past-lookup-circuit").live("click", function() {
$("#select-circuit").removeAttr("disabled");
$("#select-ne").val("");
$("#select-ne").attr("disabled", "disabled");
$("#select-circuit").val($(this).text());
$("#select-circuit").fadeOut("slow");
$("#select-circuit").fadeIn("slow");
handleLookupButton($(this).text());
});
也
function handleLookupButton(circuit) {
var ne = "";
var data = "circuit=" + circuit + "&ne=" + ne + "&random=" + Math.random();
$("#test-results-container").html(
"<b>Checking EON...</b><br><img src='images/small-loader.gif'>");
$("#test-results-container").show();
$(".tl1-results").hide();
alert("IE8 test: \n\n>" + data + "<");
$.ajax({
type : "POST",
url : "test.html",
data : data,
success : function(xhr) {
alert("IE8 test: \n\n" + xhr);
//.... stuff snipped here ....
},
error : function(xhr) {
$("#test-results-container").html("<span id='ajax-error-lookup'><b>Error: <b>" + xhr.statusText + "</span>");
$("#test-detail-container").html(xhr.responseText);
}
});
}
這裏是問題。
使用$("#lookup-button").live
函數handleLookupButton(circuit)
運行到第一個alert(),然後靜默地在.ajax函數中進行提取。沒有錯誤,它只是表現得好像它永遠不會存在。
但是,如果我使用$(".past-lookup-circuit").live
函數。 handleLookupButton(circuit)
運行得很好,包括通過.ajax函數。
對於這兩個執行,var數據字符串看起來都是相同的。即使我在handleLookupButton(circuit)
函數中將電路編號硬編碼,$("#lookup-button").live
也不起作用,但$(".past-lookup-circuit").live
確實起作用。
我敢肯定我在這裏錯過了一些簡單的東西,但我很難過。順便說一句,這在所有其他瀏覽器和IE7兼容模式下工作正常。
您是否嘗試在故障情況下添加「完整」處理程序,並查看它是否完成?另外,你可以在服務器端調試嗎?在失敗的情況下它是否完全符合要求? – OneDeveloper 2010-09-02 08:33:50
我在服務器端使用廣泛的日誌記錄。 ajax請求永遠不會被提交。添加「完整」處理程序沒有效果,因爲ajax請求永遠不會被觸發。我將繼續使用調試器來代碼,希望我能從中收集一些信息。 – Bill 2010-09-02 15:53:54
@OneDeveloper添加更多的服務器端記錄確實有幫助,謝謝。 – Bill 2010-09-02 18:44:23