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也不起作用，但$(".past-lookup-circuit").live会起作用。

我确信我在这里缺少一些简单的东西，但我很难过。顺便说一句，这适用于所有其他浏览器，ie7兼容模式。

Answer 1

而不是使用<button>尝试使用

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

Answer 2

你知道，你可以用另一种方式攻击，如果你仍然想使用$（'button＃lookup-button'）。click（）来激活一个ajax调用......

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

我还提供了一个存储我的'success'处理函数的变量。这样，我的ajax调用的成功结果然后调用另一个函数来处理结果... div（<span class="success">congratulations!</span>类型的面板）中的成功或错误条件面板，清除选中的项或textarea元素等。

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

您的里程可能会有所不同。：）

Answer 3

好的，找到了解决方法。它是愚蠢但它的工作原理。我不接受这个答案，因为我想知道它为什么会这样做。我自己回答这个问题而不是编辑这个问题，这样就更有可能被人看到并对其他人有用。

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

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

不作为触发.ajax函数的锚点。

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

是否有效。

Bleh，进入我的下一个IE8 ~~bug~~ “功能”。

IE8 jquery古怪与.click（）和.ajax（）函数

3 个答案: