第一个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="one_answers">
                    <input type="radio" name="..." id="0-0" value="0" />
                    <label>wrong</label>
                </div>
                <div class="one_answers">
                    <input type="radio" name="..." id="0-1" value="1" />
                    <label>right</label>
                </div>
                <div class="one_answers">
                    <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="one_answers">
                    <input type="radio" name="..." id="1-0" value="0" />
                    <label>right</label>
                </div>
                <div class="one_answers">
                    <input type="radio" name="..." id="1-1" value="1" />
                    <label>wrong</label>
                </div>
                <div class="one_answers">
                    <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="one_answers">
                    <input type="radio" name="..." id="2-0" value="0" />
                    <label>wrong</label>
                </div>
                <div class="one_answers">
                    <input type="radio" name="..." id="2-1" value="1" />
                    <label>wrong</label>
                </div>
                <div class="one_answers">
                    <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();
    }
});

广播按钮事件最初是一个.Click jQuery事件。但是我一直在尝试许多不同的方法来查看故障排除。在第一次单击IE8上，IE8无法识别它，并且未选择按钮，任何按钮都是这种情况。但是每个随后的点击都可以正常工作。就像父元素截取的第一键单击一样。CSS样式（填充和其他间距）也直到第一次点击事件之后才正确显示。

有什么想法？

Answer 1

您可以尝试更新.on()的删除的.live()方法，以查看它是否可以帮助您解决问题。

$('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？这是您可以尝试的一些解决方法。

我喜欢在输入字段上使用"更改"事件。

$('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 () {