的HTML

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

您可以尝试更新.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 () {

第一个jquery点击事件未在ie8中正确触发

3 个答案:

的HTML

的javascript