title: IE8 jquery weirdness with .click() and .ajax() function
body: <p>Strange problem here...</p>
  
  <p><strong>UPDATE</strong></p>
  
  <p>After adding a lot more server side debugging, I found that <code>handleLookupButton($("#select-circuit").val());</code> and <code>handleLookupButton($(this).text());</code> both do call the ajax function with the same values.  </p>
  
  <p>The problem is that <code>handleLookupButton($("#select-circuit").val());</code> does not wait around for the server results. It just blows through the ajax loop like nothing happened, no success, no error. </p>
  
  <p>The server finishes the page that the ajax function called a moment later just fine, apparently the ajax function is no longer listening for it.  I haven't figured out a resolution yet.  Once again this only happens with IE8.</p>
  
  <p><strong>END UPDATE</strong>   </p>
  
  <p><strong>Given the following jsp snippet</strong></p>
  
  <pre><code>&lt;div id="main-controls" class="main-controls ui-widget ui-corner-all" align="center" style="padding-top: 5px;"&gt;
     &lt;form action="#" id="lookupForm"&gt;
  
     &lt;div align="right" style="padding-right: 10px; padding-bottom: 5px;"&gt;
      &lt;label id="select-circuit-label" class="select-label" style="font-size: 8pt; font-weight: bold"&gt;Circuit:
        &lt;input type="text" id="select-circuit" class="main-select" style="font-size: 8pt; height: 13px; width: 100px;"&gt;
      &lt;/label&gt;
  
      &lt;label id="select-ne-label" class="select-label" style="font-size: 8pt; font-weight: bold"&gt;NE:
        &lt;input type="text" id="select-ne" class="main-select" style="font-size: 8pt; height: 13px; width: 100px;" disabled="disabled"&gt;
      &lt;/label&gt;
  
      &lt;label id="select-customer-label" class="select-label" style="font-size: 8pt; font-weight: bold"&gt;Customer:
        &lt;input type="text" id="select-customer" class="main-select" style="font-size: 8pt; height: 13px; width: 100px;" disabled="disabled"&gt;
      &lt;/label&gt;
     &lt;/div&gt;
  
     &lt;div align="center"&gt;
       &lt;button id="lookup-button" class="lookup-button ui-widget" &gt;Lookup&lt;/button&gt;
     &lt;/div&gt;
     &lt;/form&gt;
   &lt;/div&gt;
  
   &lt;br&gt;&lt;/br&gt;
  
   &lt;div id="lookup-history-container" class="ui-widget ui-widget-content ui-corner-all" align="center" style="font-size: 8pt; overflow: auto;"&gt;
      &lt;b&gt;Lookup History&lt;/b&gt;
      &lt;hr class="ui-widget ui-corner-all ui-header" width="80%"&gt;
      &lt;br&gt;
      &lt;div align="left"&gt;
        &lt;ul id="lookup-history-list"&gt;
        &lt;/ul&gt;
      &lt;/div&gt;
   &lt;/div&gt;
  
   &lt;div id="favorites-container" class="ui-widget ui-widget-content ui-corner-all" align="center" style="font-size: 8pt; overflow: auto;"&gt;
      &lt;b&gt;Favorites&lt;/b&gt;
      &lt;hr class="ui-widget ui-corner-all ui-header" width="80%"&gt;
      &lt;br&gt;
      &lt;div align="left"&gt;
        &lt;ul id="favorite-list" style="padding:2px; margin:2px; border-bottom: thin;"&gt;
            &lt;c:if test="${fn:length(favorites)&gt; 0}"&gt;
               &lt;c:forEach var="favorite" items="${favorites}"&gt;
                   &lt;c:set var="companyTrimed" value="${favorite.company}"/&gt;
                   &lt;li&gt;
                    &lt;b&gt;&lt;span class="past-lookup-circuit"&gt;&lt;c:out value="${favorite.circuit}" /&gt;&lt;/span&gt;&lt;/b&gt;
                    &lt;span class="delete-favorite-icon ui-icon ui-icon-trash" 
                             style="width: 14px; float: right;"
                             title="DELETE this Favorite" 
                             circuit='&lt;c:out value="${favorite.circuit}" /&gt;' 
                             &gt;
                      &lt;/span&gt;&lt;br&gt;
                      &lt;span class="lightly-darkened" style="padding-left: 20px;"&gt;&lt;c:out value="${fn:substring(companyTrimed,0,20)}" /&gt;...&lt;/span&gt;
  
                   &lt;/li&gt;
               &lt;/c:forEach&gt;
            &lt;/c:if&gt;
        &lt;/ul&gt;
      &lt;/div&gt;
   &lt;/div&gt;
  </code></pre>
  
  <p><strong>I have the following jQuery code</strong> </p>
  
  <pre><code>// 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());
  });
  </code></pre>
  
  <p><strong>Also</strong></p>
  
  <pre><code>function handleLookupButton(circuit) {
  
  var ne = "";
  var data = "circuit=" + circuit + "&amp;ne=" + ne  + "&amp;random=" + Math.random();
  
  $("#test-results-container").html(
          "&lt;b&gt;Checking EON...&lt;/b&gt;&lt;br&gt;&lt;img src='images/small-loader.gif'&gt;");
  $("#test-results-container").show();
  
  $(".tl1-results").hide();
  
  alert("IE8 test: \n\n&gt;" + data + "&lt;");
  
  $.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("&lt;span id='ajax-error-lookup'&gt;&lt;b&gt;Error: &lt;b&gt;" + xhr.statusText + "&lt;/span&gt;");
          $("#test-detail-container").html(xhr.responseText);
      }
  });
  </code></pre>
  
  <p>}</p>
  
  <p>Here is the issue.  </p>
  
  <p>With the <code>$("#lookup-button").live</code> function The <code>handleLookupButton(circuit)</code> runs as far as the first alert(), then bails silently at the .ajax function.  No error, it just simply acts as if it was never there.</p>
  
  <p>However if I use the <code>$(".past-lookup-circuit").live</code> function. The <code>handleLookupButton(circuit)</code> runs just fine, including through the .ajax function.  </p>
  
  <p>With both executions, the var data string looks the same. Even if I hardcode in a circuit number to the <code>handleLookupButton(circuit)</code> function, the <code>$("#lookup-button").live</code> doesn't work, but the <code>$(".past-lookup-circuit").live</code> does.</p>
  
  <p>I'm sure I'm missing something simple here, but I am stumped.  Btw, this works fine in all other browsers, and ie7 compatibility mode.</p>