第一個jquery點擊事件在ie8中沒有正確觸發

Question

我在用戶單擊按鈕後顯示的div中有一組單選按鈕。

<div id="quiz_take" class="media_layout quiz_panel hide"> 
    <div class="quiz_panel_layout"> 
     <p><b>Quiz4 Title</b></p> 
     <ol> 
      <li> 
       <div>Lorem ipsum dolor sit amet, consectetur adipiscing elit?</div> 
       <div class="ans"> 
        <input type="radio" name="..." id="0-0" value="0" /> 
        <label>wrong</label> 
       </div> 
       <div class="ans"> 
        <input type="radio" name="..." id="0-1" value="1" /> 
        <label>right</label> 
       </div> 
       <div class="ans"> 
        <input type="radio" name="..." id="0-2" value="2" /> 
        <label>wrong</label> 
       </div> 
      </li> 
      <li> 
       <div>Cras luctus ante a sem gravida rutrum?</div> 
       <div class="ans"> 
        <input type="radio" name="..." id="1-0" value="0" /> 
        <label>right</label> 
       </div> 
       <div class="ans"> 
        <input type="radio" name="..." id="1-1" value="1" /> 
        <label>wrong</label> 
       </div> 
       <div class="ans"> 
        <input type="radio" name="..." id="1-2" value="2" /> 
        <label>wrong</label> 
       </div> 
      </li> 
      <li> 
       <div>Fusce vulputate porta sem, ut bibendum urna lacinia in?</div> 
       <div class="ans"> 
        <input type="radio" name="..." id="2-0" value="0" /> 
        <label>wrong</label> 
       </div> 
       <div class="ans"> 
        <input type="radio" name="..." id="2-1" value="1" /> 
        <label>wrong</label> 
       </div> 
       <div class="ans"> 
        <input type="radio" name="..." id="2-2" value="2" /> 
        <label>right</label> 
       </div> 
      </li> 
     </ol> 
     <div class="fit"> 
      <span id="submit_quiz" class="media_layout disabled-quiz-button button">Submit</span> 
     </div> 
    </div> 
</div> 

在IE8（qa機器是XP環境）除外，每個瀏覽器都可以正常工作。它甚至可以在IE7中很好地運行。

// can only submit if every radio group has selected 
$('div.ans input:radio').live('click', function() { 
    ... 
}); 

這是它上面的按鈕單擊事件，顯示了測驗的div：

// start quiz 
$('#start_quiz').click(function() { 
    if ($(this).hasClass('quiz-take-button')) { 
     $('#quiz_ready').hide(); 
     $('#quiz_result').hide(); 
     $('div.ans input:radio').attr('checked', false); 
     $('#quiz_take').show(); 
    } 
}); 

單選按鈕事件本來是一個jQuery的。點擊

本次活動由處理事件。但我一直在嘗試許多不同的方法來查看故障排除。在第一次單擊時，IE8不能識別它，並且沒有選擇該按鈕，這是任何按鈕的情況。但隨後的每次點擊確實有效。這就像其中一個父元素攔截第一次點擊。在第一次單擊事件之後，css樣式（填充和其他空格）也不能正確顯示。

有什麼想法？

Answer 1

你可以嘗試更新.live()的方法.on()看看它是否可以幫助你解決問題。

$('div.ans').on('click','input:radio', function(){ 

}) 

Answer 2

我想你只是想提交幫助？如何驗證用戶認爲他們完成了什麼？

我在你上面的html代碼去猜測，所以這裏是我用下面

HTML

<div class="quiz-container"> 
    <div class="question"> 
    <input type="radio" name="q1"/> 
    <input type="radio" name="q1"/> 
    <input type="radio" name="q1"/> 
</div> 
<div> 
    <input type="radio" name="q1"/> 
    <input type="radio" name="q1"/> 
    <input type="radio" name="q1"/> 
</div> 
    <div class="question"> 
    <input type="radio" name="q2"/> 
    <input type="radio" name="q2"/> 
    <input type="radio" name="q2"/> 
</div> 
<div class="question"> 
    <input type="radio" name="q3"/> 
    <input type="radio" name="q3"/> 
    <input type="radio" name="q3"/> 
</div> 
<div class="submit">submit</div> 
</div> 

的JavaScript

因此，對於每一個競猜容器提交按鈕，檢查每一個答案有一個選中的單選按鈕。如果沒有，請給出「紅色」類的問題，或者其他你想做的事情。

$("div.quiz-container").on({ 
    "click":function(event){ 
    var quizContainer = $(this).closest(".quiz-container"), 
     questions =$(".question",quizContainer) , 
     answers = $("input:radio:checked",quizContainer); 
    if(questions.length !== answers.length){ 
     questions.not(answers.closest(".question")).addClass("red"); 
    } 
} 
},".submit",null); 

Answer 3

聽起來像一個錯誤。你使用的是什麼版本的jQuery？以下是您可以嘗試的幾種解決方法。

我喜歡在輸入字段上使用'change'事件。

$('div.ans input:radio').live('change', function() { 

頁面加載後是否動態加載單選按鈕？如果不是，請嘗試刪除直播。

$('div.ans input:radio').change(function() { 

我注意到更復雜的CSS選擇器的問題。你可以添加一個類到單選按鈕嗎？

$('.myRadioButtonClass').live('change', function() { 

或者也許這樣的事情。

$('div.ans').find('input').live('change', function() {