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> 

我找不到任何押韻或理由。

作為臨時解決方法，我編寫了一些JavaScript，可檢測Firefox 3，並強制進行完全刷新以將其移至下一個選項卡。

有人對如何使其正常工作有任何想法嗎？

謝謝！ 克利夫

編輯。 這是完整的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部分更改為其他內容，則可以正常工作。 這就是為什么如果您使用Firebug瀏覽DOM （也使用新版本）會刪除內部表單標簽的原因。 如果您在重新加載前在FF3.6中檢查頁面，則當按鈕顯示正確時，我認為您會發現hr及其后的所有標簽都在shipping-method-selection div

我意識到form部分無法更改，因此我不確定您可以做什么來解決。 不允許使用嵌套表單，但是我知道很多人反正可以毫無問題地使用它們。

- 編輯 -

我看了看網站， <hr>及其后的內容位於shipping-method-section 。 但是，我拿走了您的整個pastebin並執行以下操作：

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> ？