IEでjQueryに.change（）を認識させる

ラジオボタングループが変更またはクリックされたときに要素を非表示および表示するためにjQueryを使用しています。Firefoxなどのブラウザでは問題なく機能しますが、IE 6と7では、ユーザーがページの他の場所をクリックしたときにのみアクションが発生します。

詳しく説明すると、ページをロードすると、すべてが正常に見えます。Firefoxでは、ラジオボタンをクリックすると、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>

誰かがこれがなぜ起こっているのか、そしてそれを修正する方法について何か考えがあれば、彼らは非常に高く評価されます！

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

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

changeイベントを使用する場合、IEの他の要素をクリックすると、変更が認識されることに気付く場合があります。イベントを呼び出すblur()と、clickイベントが発生します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（）への呼び出しを追加しました（以下のBobbyのコメントを参照）。

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

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

これもうまくいくはずです：

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

ピアに感謝します。これはとても役に立ちました。

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();
                    });     
});

このプラグインを追加

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

その後

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

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

私が変更され：

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

に

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

そして、すべてが私にとってうまくいきます！

これは、要素をクリックしたときにIEにchangeイベントを発生させる簡単な方法です。

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

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

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

これは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();
    });     
});

IEで、ラジオとチェックボックスに「変更」イベントをトリガーさせる：

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

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

jQueryのバージョンを1.5.1に変更した場合、コードを調整する必要はありません。次に、IE9は次のことを完璧に聞きます。

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

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

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

(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
})

変更の代わりにクリックを使用するimoでは、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
});

これを試してください、それは私のために働きます

$("#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')});

これは誰かを助けるかもしれません：フォームの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が無効になっている場合、送信ボタンはオプションです）

以下を試してください：

.bind($.browser.msie ? 'click' : 'change', function(event) {

jqueryの.change（）関数の前に.focus（）または.select（）を使用しないでくださいIEし、自分のサイトで使用します。

ありがとう

//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;
       });
}

変更 / クリックではなく、それぞれを使用してみてください。これは、IEや他のブラウザーで初めて正常に機能します

初めて働いていない

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

});

初めてでもうまくいく

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

});