IE'de jQuery'nin .change () öğesini tanımasını sağlamak

Bir radyo düğmesi grubu değiştirildiğinde / tıklandığında öğeleri gizlemek ve göstermek için jQuery kullanıyorum. Firefox gibi tarayıcılarda iyi çalışıyor, ancak IE 6 ve 7'de işlem yalnızca kullanıcı sayfada başka bir yere tıkladığında gerçekleşir.

Ayrıntılı olarak, sayfayı yüklediğinizde her şey yolunda görünüyor. Firefox'ta, bir radyo düğmesini tıklarsanız, bir tablo satırı gizlenir ve diğeri hemen gösterilir. Ancak, IE 6 ve 7'de, radyo düğmesini tıklarsınız ve sayfada herhangi bir yeri tıklayana kadar hiçbir şey olmaz. Ancak bundan sonra IE, ilgili öğeleri gizleyerek ve göstererek sayfayı yeniden çizer.

İşte kullandığım jQuery:

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

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

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

İşte XHTML'nin etkilediği kısım. Sayfanın tamamı XHTML 1.0 Katı olarak doğrulanır.

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

Bunun neden olduğu ve nasıl düzeltileceği konusunda herhangi bir fikri olan varsa, çok memnun kalacaklardır!

.clickBunun yerine kullanmayı deneyin .change.

Bunun clickyerine olayı kullanmakla ilgili sorun, olayı changeaynı radyo kutusu seçiliyse (yani gerçekten değişmemişse) almanızdır. Yeni değerin eskisinden farklı olup olmadığını kontrol ederseniz, bu filtrelenebilir. Bunu biraz can sıkıcı buluyorum.

Eğer kullanırsanız changeEtkinliği IE'deki diğer herhangi bir öğeye tıkladıktan sonra değişikliği tanıyacağını fark edebilirsiniz. Etkinlikte ararsanız blur(), clickolayın başlamasına neden olur change(yalnızca radyo kutuları gerçekten değişmişse).

İşte bunu nasıl yapıyorum:

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

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

Artık değişiklik olayını normal şekilde kullanabilirsiniz.

Düzenleme: Erişilebilirlik sorunlarını önlemek için odaklanmak için bir çağrı eklendi () (aşağıdaki Bobby'nin yorumuna bakın).

IE'nin onpropertychange olayını denediniz mi? Fark eder mi bilmiyorum ama muhtemelen denemeye değer. Değerler JS kodu aracılığıyla güncellendiğinde IE, değişiklik olayını tetiklemez, ancak bu örnekte belki de onpropertychange çalışabilir.

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

Bu da işe yaramalı:

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

Teşekkürler Pier. Bu çok yardımcı oldu.

IE'de, diğer tarayıcılarda değişim sırasında tıklama olayını kullanmanız gerekir. İşleviniz olabilir

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

bu eklentiyi ekle

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

sonra

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

Giriş metni ile aynı sorunu yaşadım.

Ben değiştim:

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

için

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

ve her şey benim için iyi çalışıyor!

Bu, IE'ye, öğe tıklandığında değişiklik olayını başlatmasını söylemenin basit bir yoludur:

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

Daha fazla form öğesiyle çalışmak için bunu daha genel bir şeye genişletebilirsiniz:

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

Bunun IE ile ilgili bilinen bir sorun olduğundan oldukça eminim. onclickOlay için bir işleyici eklemek sorunu çözmelidir:

$(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'de, telsizi ve onay kutularını bir "değişiklik" olayını tetiklemeye zorlayın:

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

jquery 1.6'dan itibaren bu artık bir sorun değil .. ne zaman düzeltildiğinden emin değilim .. Tanrıya şükür yine de

JQuery sürümünüzü 1.5.1 olarak değiştirirseniz, kodunuzu ayarlamanız gerekmez. Daha sonra IE9 aşağıdakileri mükemmel şekilde dinleyecektir:

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

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

tıklama hilesi işe yarıyor ... ancak doğru radyo durumunu veya onay kutusunu almak istiyorsanız, bunu kullanabilirsiniz:

(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, değişiklik yerine tıklama kullanmak ie davranışını farklı kılar. Bir zamanlayıcı (setTimout) kullanarak değişiklik olayı davranışını taklit etmeyi tercih ederim.

(uyarı - not defteri kodu) gibi bir şey:

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

bunu dene, benim için çalışıyor

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

Bu, birine yardımcı olabilir: Formun kimliğiyle başlamak yerine, seçim kimliğini hedefleyin ve aşağıdaki gibi formu değiştirin:

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

ve jQuery:

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

(Açıkçası, javascript devre dışı bırakılırsa gönder düğmesi isteğe bağlıdır)

Takip etmeyi dene:

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

Kullanmaktan kaçının .focus () veya .Select () önce .change () fonksiyonu jquery IE için, o zaman im benim ortamında kullanın, cezası çalışır.

Teşekkürler

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

Lütfen , IE'de ve diğer tarayıcılarda ilk kez iyi çalışan değiştirme / tıklama yerine her birini kullanmayı deneyin.

İlk seferde çalışmamak

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

});

İlk seferinde bile iyi çalışıyor

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

});