非常奇怪的Firefox 3.6.x中的jQuery選擇器錯誤

Question

好吧，我花了很多時間將非AJAX購物車結賬轉換爲AJAX結帳。

我通過使用jQuery UI選項卡將各個部分分隔成選項卡來完成此操作。然後我使用AJAX在一個選項卡上發佈更改並選擇性地刷新其他選項卡。選擇性刷新只是簡單地抓取帖子的結果，並使用jQuery選擇器從響應中只抓取相關的div。

在這種特殊情況下，包含送貨信息的選項卡將發佈並刷新帶有送貨方式列表的選項卡。

這完美的作品除外一個瀏覽器：Firefox 3.6.x的（Mac和Windows）

在Firefox 3中，選擇回拉從POST，它有效地消除關鍵按鈕，並防止結果的整數部分的結果用戶繼續。

以下是完整的HTML響應，使用格式：

http://pastebin.com/aVF6yUba

編輯：以上是與實際輸出顯然不是100％一致。這裏是真正的RAW輸出： http://pastebin.com/ChAT1vLf

這裏是JavaScript代碼的相關行：

jQuery("#shipping-method-section").html(output.html()); 

以下是其他瀏覽器與線拉回來：

<!--- shipping method section ---> 
<h2>Select a shipping method:</h2> 
<ul id="shipping-methods"> 
    <li><span><label><input name="shipmethod" value="FedEx+Priority+Overnight" class="shopp shipmethod" type="radio"> FedEx Priority Overnight — <strong>$30.68</strong> <span>Estimated Delivery:&nbsp;&nbsp;September 28, 2011</span> </label> </span> </li> 
    <li> <span> <label><input name="shipmethod" value="FedEx+Standard+Overnight" class="shopp shipmethod" type="radio"> FedEx Standard Overnight — <strong>$26.46</strong> <span>Estimated Delivery:&nbsp;&nbsp;September 28, 2011</span> </label> </span> </li> 
    <li> <span> <label><input name="shipmethod" value="FedEx+2Day" class="shopp shipmethod" type="radio"> FedEx 2Day — <strong>$19.10</strong> <span>Estimated Delivery:&nbsp;&nbsp;September 29, 2011</span> </label> </span> </li> 
    <li> <span> <label><input name="shipmethod" value="FedEx+Express+Saver" class="shopp shipmethod" type="radio"> FedEx Express Saver — <strong>$18.79</strong> <span>Estimated Delivery:&nbsp;&nbsp;September 30, 2011</span> </label> </span> </li> 
    <li> <span> <label><input name="shipmethod" value="FedEx+Home+Delivery" class="shopp shipmethod" checked="checked" type="radio"> FedEx Home Delivery — <strong>$13.52</strong> <span>Estimated Delivery:&nbsp;&nbsp;September 27, 2011</span> </label> </span> </li> 
</ul> 
<hr> 
<div class="tab-back-button"> 
    <input class="tab-back-button" value="Shipping Address" type="button"> 
</div> 
<input value="Payment Method" name="shipping-method-section-button" class="shipping-method-section-button" type="button"> 

這裏是什麼Firefox 3.6.x回退：

<h2>Select a shipping method:</h2> 
<ul id="shipping-methods"> 
    <li><span><label><input name="shipmethod" value="FedEx+Priority+Overnight" class="shopp shipmethod" type="radio"> FedEx Priority Overnight — <strong>$30.68</strong> <span>Estimated Delivery:&nbsp;&nbsp;September 28, 2011</span> </label> </span> </li> 
    <li> <span> <label><input name="shipmethod" value="FedEx+Standard+Overnight" class="shopp shipmethod" type="radio"> FedEx Standard Overnight — <strong>$26.46</strong> <span>Estimated Delivery:&nbsp;&nbsp;September 28, 2011</span> </label> </span> </li> 
    <li> <span> <label><input name="shipmethod" value="FedEx+2Day" class="shopp shipmethod" type="radio"> FedEx 2Day — <strong>$19.10</strong> <span>Estimated Delivery:&nbsp;&nbsp;September 29, 2011</span> </label> </span> </li> 
    <li> <span> <label><input name="shipmethod" value="FedEx+Express+Saver" class="shopp shipmethod" type="radio"> FedEx Express Saver — <strong>$18.79</strong> <span>Estimated Delivery:&nbsp;&nbsp;September 30, 2011</span> </label> </span> </li> 
    <li> <span> <label><input name="shipmethod" value="FedEx+Home+Delivery" class="shopp shipmethod" checked="checked" type="radio"> FedEx Home Delivery — <strong>$13.52</strong> <span>Estimated Delivery:&nbsp;&nbsp;September 27, 2011</span> </label> </span> </li> 
</ul> 

我可以找不到任何押韻或原因。

作爲臨時解決方法，我編寫了一些檢測Firefox 3的JavaScript並強制進行全面刷新，以使它們進入下一個選項卡。

任何人有任何想法如何使這項工作正常？

謝謝！ Clif

編輯。下面是完整的JavaScript：

jQuery.post(url, data, function(output) { 
    if(error_check_passed(output, "FedEx")) 
    { 
     jQuery("#shipping-section").css({ 'opacity' : 1.0 }); 
     update_cart_summary(output); 

     hide_errors(); 
     output = jQuery("#shipping-method-section", jQuery(output)); 

     jQuery("#shipping-method-section").html(output.html()); 
     allowTabChange = true; 
     jQuery("#checkout-tabs").tabs('select', 1); 
    } 
    else 
    { 
     jQuery("#shipping-section").fadeTo('fast', 1.0); 
     show_errors(output, "FedEx"); 
    } 
}); 

Answer 1

它與兩個form標籤有關。我複製了你的pastebin，並將它縮減到shipping-method-section所在的部分，並且它在ff3.6中運行正常。然後我添加了該部分所在的部分，這是form部分。然後它破裂了。如果將外部form部分更改爲其他任何內容，則它可以正常工作。這也是爲什麼如果您使用螢火蟲瀏覽DOM（更新版本），內部表單標籤將被剝離。如果你在FF3中檢查你的頁面。6重裝前，當按鈕顯示正確，我想你會發現hr和所有變量後，它是在shipping-method-selectiondiv

我意識到form部分外不能改變，所以我不確定你可以做些什麼來解決它。嵌套表格aren't allowed，但我知道很多人使用它們，沒有任何問題。

- 編輯 -

我看了看現場，和<hr>和裏面shipping-method-section。不過，我把你的整個引擎收錄並做：

jQuery.post('testClifPost.html', function(output) { 

    var d = document.createElement('div'); 
    d.innerHTML = output; 
    console.log(d); 
} 

在此輸出，<hr>是shipping-method-section之外。這似乎是說，它不是jQuery，但是當javascript要求它解析一些東西，當它加載到瀏覽器中時，firefox 3.6以不同的方式解析事情。

Answer 2

這可能是FF不喜歡<hr>標籤，並打破了那裏。你是否用<hr />而不是<hr>來嘗試它？