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 部分无法更改，因此我不确定您可以采取什么措施来解决它。嵌套表单aren't allowed，但我知道很多人无论如何都使用它们没有问题。

--编辑--

我查看了该站点，<hr> 和 on 位于 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> 吗？