0

別のクリックイベントによってトリガーされたときにラジオボタンが選択される前に、ラジオ入力のクリックイベントにバインドされた関数が起動するという奇妙な問題があります。そのようにすると少し混乱するように聞こえるので、コードを見てみましょう。

<div class="side">
    <input type="radio" id="100" value="100" name="radiogroup" style="display:none;" />
    <label for="100">
        <img src="" />
        <span>Description</span>
    </label>
</div>

ほとんどのブラウザは、ラジオ入力の選択をトリガーするためのラベルのクリックをサポートしていますが、もちろんIEはサポートしていません。このため、HTMLで条件付きクラスを使用しています。

<!--[if IE 8]><html class="no-js lt-ie9 ie8" lang="en" xmlns="http://www.w3.org/1999/xhtml"> <![endif]-->

これにより、IE固有のJavaScriptを簡単に作成できます。この場合、ラベルがクリックされたときのラジオ入力のクリックをシミュレートする必要があります。これは次のようになります。

$(".lt-ie9 .side label").bind("click", function() {
    $(this).siblings("input").click();
});

この時点まではすべて正常に機能します。次のように、ラジオ入力がクリックされたときにAJAX呼び出しを挿入しようとすると、問題が発生します。

$("input[name=radiogroup]").bind("click", function() {
    //some ajax call referencing which radio option is selected.
});

私が抱えている問題は、ラジオ入力が実際に最新の選択に切り替えられる前に、ajaxメソッドが起動されることです。たとえば、ID /値が「100」、「101」、「102」などの複数の無線入力がある場合。100をクリックしてから101をクリックすると、ajax呼び出しは次の値を使用します。最近クリックされた101の値ではなく100。なぜこれが起こっているのか誰か知っていますか？最新のラジオボタンがチェックされるまで、ajaxメソッドを呼び出さないように思われます。これがすべて理にかなっていることを願っています。

4

2 に答える 2

0

バインドを「クリック」ではなく「変更」に切り替えることで機能しましたが、IE にはまだ問題がありました。$(this).siblings("input").click().change(); を呼び出すことでこれを解決しました。

于 2013-03-18T14:24:21.487 に答える
0

IE は display:none では動作しません。無線でラベルのクリックを起動します。ただし、非表示の要素 (またはクリック イベント) で変更イベントをトリガーすることで、(あなたが持っているものと同様に) それを回避できます。マークアップにも問題があります。

マークアップを変更して、数字で開始できない ID を修正し、わずかに変更されたコードを追加しました。おそらく、ソリューションよりも少しモジュール化されていますか?

<div class="side">
    <input type="radio" id="my100" value="100" name="radiogroup" style="display:none;" />
    <label id='my100label' for="my100">
        <img src="" />
        <span>Description</span>
    </label>
</div>

新しい ID を使用したコード:

$('.side').on('click','#my100label',function(){
  $('#my100').prop('checked',true).trigger('change');
});
$('#my100').on('change',function(){
  alert('Howdy I am:'+ $(this).prop('checked'));
});

注:.prop()コードを削除して、単に「クリック」イベントをトリガーすることはできますが、ラジオの変更/クリック内の最初の時間は、プロップが false (まだ変更/クリックされていない) になります。その道を行く。この場合、変更イベントを監視することをお勧めします。要素を手動で「クリック」することはできず、その隠された性質のためにコードを使用して変更/クリックする必要があるためです。フォーム内の場合は変更されません。参加する。

注: jQuery 1.9.1 と IE8 を使用してこのコードをテストしました: http://jsbin.com/ocisul/1/edit

于 2013-03-18T15:03:59.430 に答える