1

ユーザーがボタンをクリックした後に表示される 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はそれを認識せず、ボタンは選択されていません。これはどのボタンにも当てはまります。ただし、その後の各クリックは機能します。親要素の 1 つが最初のクリックをインターセプトするようなものです。css スタイル (パディングやその他の間隔) も、最初のクリック イベントの後まで正しく表示されません。

何かご意見は？

4

3 に答える 3

1

.live()廃止されたメソッドを更新して.on()、問題の解決に役立つかどうかを確認できます。

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

})
于 2012-11-09T15:17:54.880 に答える
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 に答える
0

バグのようですね。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 () {
于 2012-11-09T15:34:11.123 に答える