第一个 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();
    }
});

单选按钮事件最初是一个 .click jquery 事件。但我一直在尝试许多不同的方法来查看故障排除。在第一次点击 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 () {