Firefox 3.6.x에서 매우 이상한 jQuery 선택기 버그

Question

좋아, 나는 AJAX가 아닌 체크 아웃을 AJAX 체크 아웃으로 바꾼 많은 시간을 보냈다.

jQuery UI 탭을 사용하여 다양한 섹션을 탭으로 구분하여이 작업을 수행했습니다. 그런 다음 AJAX를 사용하여 한 탭에서 변경 사항을 게시하고 다른 탭을 선택적으로 새로 고칩니다. 선택적 새로 고침은 단순히 게시물의 결과를 가져오고 jQuery 선택기를 사용하여 응답에서 관련 div만을 가져옵니다.

이 특별한 경우 배송 정보가있는 탭은 배송 방법 목록이있는 탭을 게시하고 새로 고침합니다.

이

이 완벽하게 하나의 브라우저를 제외하고 작품 : 파이어 폭스 3.6.x에서 (Mac과 Windows)

를 파이어 폭스 3에서 선택 효과적으로 중요 버튼을 제거하고를 방지 POST의 결과에서 잘린 결과를 다시 끌어 사용자가 진행하지 못하도록합니다.

여기 서식 전체 HTML 응답이다

http://pastebin.com/aVF6yUba

EDIT : 상기는 실제 출력 명백하게 100 % 일치한다. 여기 http://pastebin.com/ChAT1vLf

자바 스크립트 관련 라인 :

여기

<!--- 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"> 

은 무엇입니까 : 여기

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

다른 모든 브라우저가 그 라인을 다시 끌어 무엇인가 여기에 진정으로 RAW 출력은 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

EDIT. 여기에 전체 자바 스크립트는 다음과 같습니다

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 태그와 관련이 있습니다. 붙여 넣기 상자를 복사하여 shipping-method-section이 들어있는 부분으로 잘라내어 ff3.6에서 제대로 작동합니다. 그런 다음 해당 섹션이있는 섹션을 추가했습니다 (form 섹션). 그런 다음 파산했다. 외부 form 섹션을 다른 섹션으로 변경하면 정상적으로 작동합니다. 그 이유는 내부 서식 태그가 firebug (최신 버전에서도)를 사용하여 DOM을 탐색하면 제거되는 이유이기도합니다. FF3에서 귀하의 페이지를 검사하는 경우.버튼이 제대로 표시 할 때 6은 다시로드하기 전에, 나는 당신이 hr 모든 태그를 변경할 수 없습니다 그것은 내가 form 섹션을 실현 shipping-method-selectiondiv

외부 후 찾을 것입니다 생각, 그래서 아니에요 그 문제를 해결하기 위해 할 수있는 일이 무엇인지 확인하십시오. 중첩 된 양식 aren't allowed,하지만 많은 사람들이 어쨌든 아무 문제없이 사용하는 것을 알고 있습니다.

--edit--

나는 현장에서보고, 그리고 <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가 아니라고 말하고있는 것 같습니다. 파이어 폭스 3.6에서는 javascript가 브라우저에로드 할 때 구문 분석을 요청할 때 상황을 다르게 파싱합니다.

Answer 2

그것은 FF는 <hr> 태그를 좋아하지 않으며, 거기 파괴되어있을 수 있습니다. <hr> 대신 <hr />을 사용해 보셨습니까?