IE8 jquery 与 .click() 和 .ajax() 函数的怪异

Question

这里有奇怪的问题...

更新

添加了更多服务器端调试后，我发现handleLookupButton($("#select-Circuit").val());和handleLookupButton($(this).text()); 两者都使用相同的值调用ajax函数。

问题是 handleLookupButton($("#select- Circuit").val()); 不会等待服务器结果。它只是像什么都没发生一样吹过ajax循环，没有成功，没有错误。

服务器稍后就完成了ajax函数调用的页面，显然ajax函数不再监听它。我还没想出解决办法。再次强调，只有 IE8 才会出现这种情况。

END UPDATE

给出以下 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 也不起作用，但是 < code>$(".past-lookup- Circuit").live 确实如此。

我确信我在这里遗漏了一些简单的东西，但我很困惑。顺便说一句，这在所有其他浏览器和 ie7 兼容模式下都可以正常工作。

Answer 1

而不是使用 尝试使用

<input type="button" id="lookup-button" class="lookup-button ui-widget" value="Loopup" />

Answer 2

你知道，如果你仍然想使用 $('button#lookup-button').click() 来触发 ajax 调用，你可以用另一种方式来攻击......

我已经编写了大量的“GUI catcher”代码（就像点击事件等），然后调用我的ajax函数，传递我需要的参数。这样，它为我提供了为其他类似 GUI 的事件请求重用相同的 ajax 函数的机会……

我还提供了一个变量来存储我的“成功”处理函数。这样，我的 ajax 调用的成功结果就会调用另一个函数来处理结果...div 中的成功或错误条件面板（恭喜！ 类型的面板），清除选中的项目或文本区域元素等......

可能看起来“更复杂”，但它提供了更大的灵活性，对我来说......

你的里程可能会有所不同。 :)

Answer 3

好的，找到了解决方法。这很无聊，但很有效。我不接受这个答案，因为我想知道它为什么这样做。我自己回答它，而不是编辑问题，以便它更容易被其他人看到并对其有用。

问题在于单击“按钮”标签。

<button id="lookup-button" class="lookup-button ui-widget" >Lookup</button>

不充当触发 .ajax 函数的锚点。

<span id="lookup-span">Lookup</span>

确实有效。

哎呀，我的下一个 IE8 bug“功能”。