web-dev-qa-db-ja.com

IEで.change（）を認識するjQueryの取得

ラジオボタングループが変更/クリックされたときに、jQueryを使用して要素を非表示および表示しています。 Firefoxのようなブラウザでは正常に動作しますが、IE 6および7では、ユーザーがページのどこかをクリックしたときにのみアクションが発生します。

詳しく説明すると、ページをロードすると、すべてが正常に見えます。 Firefoxでは、ラジオボタンをクリックすると、1つのテーブル行が非表示になり、もう1つの行がすぐに表示されます。ただし、IE 6および7では、ラジオボタンをクリックしても、ページのどこかをクリックするまで何も起こりません。その後のみIEページを再描画します、関連する要素を非表示および表示します。

私が使用しているjQueryは次のとおりです。

$(document).ready(function () {
  $(".hiddenOnLoad").hide();

  $("#viewByOrg").change(function () {
    $(".visibleOnLoad").show();
    $(".hiddenOnLoad").hide();
  });

  $("#viewByProduct").change(function () {
    $(".visibleOnLoad").hide();
    $(".hiddenOnLoad").show();
  });
});

これが影響するXHTMLの一部です。ページ全体がXHTML 1.0 Strictとして検証されます。

<tr>
  <td>View by:</td>
  <td>
    <p>
      <input type="radio" name="viewBy" id="viewByOrg" value="organisation"
      checked="checked" />Organisation</p>
    <p>
      <input type="radio" name="viewBy" id="viewByProduct" value="product" />Product</p>
  </td>
</tr>
<tr class="visibleOnLoad">
  <td>Organisation:</td>
  <td>
    <select name="organisation" id="organisation" multiple="multiple" size="10">
      <option value="1">Option 1</option>
      <option value="2">Option 2</option>
    </select>
  </td>
</tr>
<tr class="hiddenOnLoad">
  <td>Product:</td>
  <td>
    <select name="product" id="product" multiple="multiple" size="10">
      <option value="1">Option 1</option>
      <option value="2">Option 2</option>
    </select>
  </td>
</tr>

なぜこれが起こっているのか、どのようにそれを修正するのかについてのアイデアがあれば、彼らは大歓迎です！

jqueryinternet-explorer
131
Philip Morton

.click の代わりに .change を使用してみてください。

96
Paolo Bergantino

clickの代わりにchangeイベントを使用する場合の問題は、同じラジオボックスが選択されている場合（つまり、実際には変更されていない場合）にイベントが発生することです。新しい値が古い値と異なることを確認した場合、これは除外できます。これは少し面倒です。

changeイベントを使用する場合、IEの他の要素をクリックすると、変更が認識されることがあります。 clickイベントでblur()を呼び出すと、changeイベントが発生します（ラジオボックスに実際に変更がある場合のみ）。

ここに私がそれをやっている方法があります：

// This is the hack for IE
if ($.browser.msie) {
  $("#viewByOrg").click(function() {
    this.blur();
    this.focus();
  });
}

$("#viewByOrg").change(function() {
  // Do stuff here
});

これで、通常どおりchangeイベントを使用できます。

編集：アクセシビリティの問題を防ぐためにfocus（）の呼び出しを追加しました（以下のボビーのコメントを参照）。

54
Mark A. Nicolosi

IEのonpropertychangeイベントを試しましたか？それが違いを生むかどうかはわかりませんが、おそらく試してみる価値はあります。 IEは、JSコードを介して値が更新されたときに変更イベントをトリガーしませんが、このインスタンスではおそらくonpropertychangeが機能します。

$("#viewByOrg").bind($.browser.msie? 'propertychange': 'change', function(e) {
  e.preventDefault(); // Your code here 
});
33
Kevin

これも動作するはずです：

$(document).ready(function(){
   $(".hiddenOnLoad").hide();
   $("#viewByOrg, #viewByProduct").bind(($.browser.msie ? "click" : "change"), function () {
                        $(".visibleOnLoad").show();
                        $(".hiddenOnLoad").hide();
                    });
});

ありがとうピア。これはとても役に立ちました。

14
Arthur Bezner

このプラグインを追加

jQuery.fn.radioChange = function(newFn){
    this.bind(jQuery.browser.msie? "click" : "change", newFn);
}

それから

$(function(){
    $("radioBtnSelector").radioChange(function(){
        //do stuff
    });
});
6
dovidweisz

IEでは、クリックイベントを使用する必要があります。他のブラウザではonchange。

$(document).ready(function(){
   $(".hiddenOnLoad").hide();
   var evt = $.browser.msie ? "click" : "change";
   $("#viewByOrg").bind(evt, function () {
                        $(".visibleOnLoad").show();
                        $(".hiddenOnLoad").hide();
                    });

   $("#viewByProduct").bind(evt, function () {
                        $(".visibleOnLoad").hide();
                        $(".hiddenOnLoad").show();
                    });     
});
6
Pier Luigi

入力テキストにも同じ問題がありました。

私が変更され：

$("#myinput").change(function() { "alert('I changed')" });

に

$("#myinput").attr("onChange", "alert('I changed')");

そしてすべてが私のためにうまく機能しています！

4
fabrice

これはIEに要素がクリックされたときに変更イベントを発生させることを伝える簡単な方法です。

if($.browser.msie) {
    $("#viewByOrg").click(function() {
        $(this).change();
    });
}

これをより一般的なものに拡張して、より多くのフォーム要素を操作できます。

if($.browser.msie) {
    $("input, select").click(function() {
        $(this).change();
    });
    $("input, textarea").keyup(function() {
        $(this).change();
    });
}
2
paul

IEでは、ラジオとチェックボックスで「変更」イベントをトリガーします。

if($.browser.msie && $.browser.version < 8)
  $('input[type=radio],[type=checkbox]').live('click', function(){
    $(this).trigger('change');
  });
1
Jeoff Wilks

これはIEの既知の問題であると確信しています。 onclickイベントのハンドラーを追加すると、問題が修正されます。

$(document).ready(function(){

    $(".hiddenOnLoad").hide();

    $("#viewByOrg").change(function () {
        $(".visibleOnLoad").show();
        $(".hiddenOnLoad").hide();
    });

    $("#viewByOrg").click(function () {
        $(".visibleOnLoad").show();
        $(".hiddenOnLoad").hide();
    });

    $("#viewByProduct").change(function () {
        $(".visibleOnLoad").hide();
        $(".hiddenOnLoad").show();
    });     

    $("#viewByProduct").click(function () {
        $(".visibleOnLoad").hide();
        $(".hiddenOnLoad").show();
    });     
});
1
Chris Zwiryk

JQueryバージョンを1.5.1に変更する場合、コードを調整する必要はありません。その後、IE9は次のことに完全に耳を傾けます。

$(SELECTOR).change(function() {
    // Shizzle
});

http://code.jquery.com/jquery-1.5.1.min.js

1
Bas Matthee

jquery 1.6以降、これは問題ではなくなりました。しかし、いつ修正されたかはわかりませんが。

1
Baz1nga

クリックのトリックは機能します...しかし、ラジオまたはチェックボックスの正しい状態を取得したい場合は、これを使用できます：

(function($) {
    $('input[type=checkbox], input[type=radio]').live('click', function() {
       var $this = $(this);
       setTimeout(function() {
          $this.trigger('changeIE'); 
       }, 10) 
    });
})(jQuery);

$(selector).bind($.browser.msie && $.browser.version <= 8 ? 'changeIE' : 'change', function() {
  // do whatever you want
})
1
nostop

。focus（）または。select（）の前に。change（） IEのjqueryの機能を使用しないでください。それはうまく動作し、私のサイトで使用しています。

ありがとう

0
Danish

これを試して、それは私のために働く

$("#viewByOrg")
        .attr('onChange', $.browser.msie ? "$(this).data('onChange').apply(this)" : "")
        .change( function(){if(!$.browser.msie)$(this).data('onChange').apply(this)} )
        .data('onChange',function(){alert('put your codes here')});
0
RainChen

変更の代わりにクリックを使用する場合、IEの動作が異なります。むしろ、タイマー（setTimout）を使用して変更イベントの動作をエミュレートします。

（警告-メモ帳コード）のようなもの：

if ($.browser.msie) {
  var interval = 50;
  var changeHack = 'change-hac';
  var select = $("#viewByOrg");
  select.data(changeHack) = select.val();
  var checkVal=function() {
    var oldVal = select.data(changeHack);
    var newVal = select.val();
    if (oldVal !== newVal) {
      select.data(changeHack, newVal);
      select.trigger('change')
    }
    setTimeout(changeHack, interval);
  }
  setTimeout(changeHack, interval);
}

$("#viewByOrg").change(function() {
  // Do stuff here
});
0
Ken Egozi

以下を試してください：

.bind($.browser.msie ? 'click' : 'change', function(event) {
0
Bilal Jalil
//global
var prev_value = ""; 

$(document).ready(function () {

 if (jQuery.browser.msie && $.browser.version < 8)
      $('input:not(:submit):not(:button):not(:hidden), select, textarea').bind("focus", function () { 
         prev_value = $(this).val();

       }).bind("blur", function () { 
         if($(this).val() != prev_value)
         has_changes = true;
       });
}
0
kiev

change/clickの代わりにeachを使用してみてください。IE他のブラウザと同様に

初めて動作しない

$("#checkboxid").**change**(function () {

});

初めてでも正常に動作する

$("#checkboxid").**each**(function () {

});
0
Dayanand Rupanavar

これは誰かを助けるかもしれません：次のように、フォームのIDで開始する代わりに、選択IDをターゲットにして、変更時にフォームを送信します。

<form id='filterIt' action='' method='post'>
  <select id='val' name='val'>
    <option value='1'>One</option>
    <option value='2'>Two</option>
    <option value='6'>Six</option>
  </select>
  <input type="submit" value="go" />
</form>

およびjQuery：

$('#val').change(function(){
  $('#filterIt').submit();
});

（明らかに、JavaScriptが無効になっている場合の送信ボタンはオプションです）

0
Jongosi