Mendapatkan jQuery untuk mengenali .change () di IE

Saya menggunakan jQuery untuk menyembunyikan dan menampilkan elemen ketika grup tombol radio diubah / diklik. Ini berfungsi dengan baik di browser seperti Firefox, tetapi di IE 6 dan 7, tindakan hanya terjadi ketika pengguna kemudian mengklik di tempat lain di halaman.

Singkatnya, ketika Anda memuat halaman, semuanya terlihat baik-baik saja. Di Firefox, jika Anda mengklik tombol radio, satu baris tabel disembunyikan dan yang lainnya langsung ditampilkan. Namun, di IE 6 dan 7, Anda mengklik tombol radio dan tidak ada yang akan terjadi sampai Anda mengklik suatu tempat di halaman. Baru kemudian IE menggambar ulang halaman, menyembunyikan dan menampilkan elemen yang relevan.

Inilah jQuery yang saya gunakan:

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

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

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

Inilah bagian dari XHTML yang mempengaruhi. Seluruh halaman divalidasi sebagai 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>

Jika ada yang tahu mengapa ini terjadi dan bagaimana cara memperbaikinya, mereka akan sangat dihargai!

Coba gunakan .clicksebagai ganti .change.

Masalah dengan menggunakan clickacara bukannyachange Anda mendapatkan acara jika kotak radio yang sama dipilih (yaitu belum benar-benar berubah). Ini dapat disaring jika Anda memeriksa bahwa nilai baru berbeda dari yang lama. Saya menemukan ini agak mengganggu.

Jika Anda menggunakan changeacara tersebut, Anda mungkin memperhatikan bahwa itu akan mengenali perubahan setelah Anda mengklik elemen lain di IE. Jika Anda menelepon blur()di clickacara, itu akan menyebabkan changeacara untuk api (hanya jika kotak radio benar-benar memiliki berubah).

Begini cara saya melakukannya:

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

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

Sekarang Anda dapat menggunakan acara perubahan seperti biasa.

Sunting: Menambahkan panggilan untuk fokus () untuk mencegah masalah aksesibilitas (lihat komentar Bobby di bawah).

Sudahkah Anda mencoba acara pertukaran properti IE? Saya tidak tahu apakah itu membuat perbedaan tetapi mungkin patut dicoba. IE tidak memicu peristiwa perubahan ketika nilai diperbarui melalui kode JS tapi mungkin pertukaran properti akan bekerja dalam hal ini.

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

Ini juga harus bekerja:

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

Terima kasih Pier. Ini sangat membantu.

Di IE Anda harus menggunakan acara klik, di browser lain onchange. Fungsi Anda bisa menjadi

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

tambahkan plugin ini

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

kemudian

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

Saya memiliki masalah yang sama dengan teks input.

Aku berubah:

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

untuk

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

dan semuanya bekerja dengan baik untuk saya!

Ini adalah cara sederhana untuk memberi tahu IE agar memecat acara perubahan ketika elemen diklik:

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

Anda bisa memperluas ini ke sesuatu yang lebih umum untuk bekerja dengan lebih banyak elemen bentuk:

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

Saya cukup yakin ini adalah masalah yang diketahui dengan IE. Menambahkan pawang untuk onclickacara tersebut akan memperbaiki masalah:

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

Di IE, paksa radio dan kotak centang untuk memicu acara "perubahan":

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

pada jquery 1.6 ini tidak lagi menjadi masalah .. meskipun tidak pasti kapan diperbaiki .. Syukurlah untuk itu

Jika Anda mengubah versi jQuery Anda ke 1.5.1, Anda tidak perlu menyesuaikan kode Anda. Kemudian IE9 akan mendengarkan dengan sempurna untuk:

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

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

trik dengan klik berfungsi ... tetapi jika Anda ingin mendapatkan kondisi radio atau kotak centang yang benar, Anda dapat menggunakan ini:

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

saya menggunakan klik bukannya perubahan membuat perilaku yaitu berbeda. Saya lebih suka meniru perubahan perilaku acara menggunakan timer (setTimout).

sesuatu seperti (peringatan - kode notepad):

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

coba ini, ini bekerja untuk saya

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

Ini dapat membantu seseorang: Alih-alih memulai dengan id formulir, targetkan id pilih dan kirimkan formulir pada perubahan, seperti ini:

<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>

dan jQuery:

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

(Jelas, tombol kirim opsional, jika javascript dinonaktifkan)

Coba yang berikut ini:

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

Hindari menggunakan .focus () atau .select () sebelum .change () fungsi jquery untuk IE, maka itu berfungsi dengan baik, saya menggunakannya di situs saya.

Terima kasih

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

Silakan coba masing - masing alih-alih ganti / klik , yang berfungsi dengan baik bahkan pertama kali di IE dan juga peramban lainnya

Tidak Bekerja pertama kali

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

});

Bekerja dengan baik bahkan untuk pertama kalinya

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

});