1

I have a group of radio buttons in a div that is displayed after the user clicks a button.

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

This works fine in every browser, except for IE8 (the qa machine is an XP environment). It even works fine in IE7 oddly enough.

The event is handled by:

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

This is the click event for a button above it that shows the quiz 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();
    }
});

The radio button event was originally a .click jquery event. But I've been trying many different methods to see troubleshoot. On the first click IE8 doesn't recognize it and the button is not selected, this is the case for any button. But each subsequent click does work. It's like one of the parent elements intercepts the first click. The css styling (padding and other spacing) is also not displaying correctly until after the first click event as well.

Any thoughts?

4

3 回答 3

1

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

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

})
于 2012-11-09T15:17:54.880 回答
0

Sounds like a bug. What version of jQuery are you using? Here are a few workarounds that you can try.

I like using the 'change' event on input fields.

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

Are the radio buttons loaded dynamically after the page has loaded? If not, try removing the live.

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

I’ve noticed issues with more complex CSS selectors. Can you add a class to the radio button. 

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

Or maybe something like this.

$('div.ans').find('input').live('change', function () {
于 2012-11-09T15:34:11.123 回答
0

我想你只是想提交帮助？如何验证用户何时认为他们已经完成？

我不得不猜测你上面的 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);
于 2012-11-09T15:27:32.813 回答