Отримання jQuery для розпізнавання .change () в IE

Я використовую jQuery для приховування та показу елементів, коли група перемикачів змінюється / клацається. Це добре працює в браузерах, таких як Firefox, але в IE 6 і 7 дія відбувається лише тоді, коли користувач потім натисне десь ще на сторінці.

Щоб уточнити, коли ви завантажуєте сторінку, все виглядає добре. Якщо у Firefox натиснути перемикач, один рядок таблиці прихований, а інший відображається негайно. Однак в 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
});

Тепер ви можете використовувати подію зміни як звичайну.

Редагувати: Додано дзвінок до фокусу (), щоб запобігти проблемам із доступністю (див. Коментар Бобі нижче).

Ви пробували подію IE onpropertychange? Я не знаю, чи має це значення, але, напевно, варто спробувати. IE не запускає подію зміни, коли значення оновлюються за допомогою JS-коду, але, можливо, в цьому випадку буде функціонувати 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 ви повинні використовувати подію натискання, в інших браузерах на зміну. Вашою функцією може стати

$(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 запустити подію зміни при натисканні на елемент:

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 використання клацання замість зміни робить тобто поведінку відрізняється. Я б краще наслідувати поведінку події зміни за допомогою таймера (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')});

Це може допомогти комусь: Замість того, щоб починати з ідентифікатора форми, націліть на ідентифікатор вибору та подайте форму на зміну, наприклад:

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

Уникайте використання .focus () або .select () перед .change () функцією jquery для 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 () {

});