web-dev-qa-db-ja.com

IEで起動しない<select>のjQuery変更イベント

可変数の<select>要素を持つページがあります（ここでイベント委任を使用している理由を説明しています）。ユーザーが選択したオプションを変更したときに、ページ上のさまざまなコンテンツ領域を非表示/表示したい。ここに私が持っているコードがあります：

$(document).ready(function() {
  $('#container').change(function(e) {
    var changed = $(e.target);

    if (changed.is('select[name="mySelectName"]')) {
      // Test the selected option and hide/show different content areas.
    }
  });
});

これはFirefoxとSafariで機能しますが、IEではchangeイベントは発生しません。理由は誰にもわかりませんか？ありがとう！

javascriptjqueryjavascript-eventsinternet-explorer
55
Justin Stayton

changeイベントはIE（ here および here を参照）にバブルしません。イベント委任をタンデムで使用することはできません。それと。

実際、これは、IEバグにより、jQuery liveがchangeを サポートされるイベントのリスト （FYI DOM仕様はchangeバブルする必要があります と述べています）。[ 1 ]

質問に関しては、各選択に直接バインドできます。

_$('#container select').change(/*...*/)
_

イベントの委任が本当に必要な場合は、might何を試みて成功するかを見つけてください この人がやった とclickにバインドin IE only、whichdoesバブル：

_$('#container').bind($.browser.msie ? 'click' : 'change', function(event) {
    /* test event.type and event.target 
     * to capture only select control changes
     */
})
_

しかし、このブラウザ検出は本当に間違っていると感じています。私は実際に前の例で作業してみます（ドロップダウンに直接バインドします）。数百個の_<select>_ボックスがない限り、イベントの委任はここであなたをあまり買わないでしょう。

[ 1 ]注：jQuery> = 1.4は、IE via live()）のバブリングchangeイベントをシミュレートするようになりました/ on() 。

71
Crescent Fresh

jquery 1.4.4（および私は1.4.3と思う）を使用することは、今ではすべて良いと思われます。..変更イベントは、私の限られたテストで一貫して動作します。

3
user406905

役立つかもしれないアイデア：

$(document).ready(function() {
  $('#container select[name="mySelectName"]').change(function(e) {
    var s = $(e.target);
    if (s.val()=='1') //hide/show something;
  });
});

AJAXを使用している場合は、 live（） 関数を試してください。

 $(document).ready(function() {
       $('#container select[name="mySelectName"]').live('change', function(e) {
        var s = $(e.target);
        if (s.val()=='1') //hide/show something;
      });
    });
3
Arnis Lapsa

正しく思い出すと、jQueryでchange（）を呼び出すためにblur（）を呼び出す必要がありますIEマシン。

$("select[name=mySelectName]").click(function() {
    $(this).blur();
});
3
Daniel Sloof

onchange=doActionは、IEおよびFirefoxで動作しますが、Chromeではサポートされていません。

これを処理するには、jQueryの.changeイベントを使用する必要があります。

1
Madhura

この行をページヘッドに追加して、座ってリラックスしてください！ :)

$(document).ready(function(){$('select').bind('onChange',function(){$(this).blur()});});
1
Soheil

イベントを受信した後、選択の名前を再確認する必要がある理由を理解しようとしています。

たぶん同じIDを持つ複数の要素を持っていますか？

実際には、「＃container」ではなく「#container select」と言うつもりでしたか？

0
Maciek

AJAX呼び出しを介してこのSELECTを#container内にロードしても存続するクロスプラットフォームソリューションのために、 "Crescent Flesh"によって設定された例を基に構築しています。

$('#container').bind($.browser.msie ? 'click' : 'change', function(event) {
  if ((event.type == 'click') || (event.type == 'change')) {
    if (event.target.toString().indexOf('Select') != -1) {
      var sWhich = $('#container SELECT').val();
      handleSelectionChange(sWhich);
    }
  }
});

ここで、単純にhandleSelectionChange（）関数を作成し、必要に応じて名前を変更します。

0
Volomike

IEでは、変更イベントをドキュメント内に配置する必要があります。これは、変更イベントを関連する要素にバインドしているようです。それが役に立てば幸い。

0
Pramod Kankure