Получение 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>

Если у кого-то есть идеи, почему это происходит и как это исправить, они будут очень благодарны!

ОТВЕТЫ

Ответ 1

Попробуйте использовать .click вместо .change.

Ответ 2

Проблема с использованием события 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
});

Теперь вы можете использовать событие изменения, как обычно.

Изменить: добавлен вызов focus() для предотвращения проблем с доступом (см. комментарий Бобби ниже).

Ответ 3

Вы пробовали событие IE onpropertychange? Я не знаю, имеет ли это значение, но, вероятно, стоит попробовать. IE не запускает событие изменения, когда значения обновляются через JS-код, но, возможно, onpropertychange будет работать в этом случае.

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

Ответ 4

Это тоже должно работать:

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

Спасибо Пирсу. Это было очень полезно.

Ответ 5

В IE вы должны использовать событие click, в других браузерах 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

добавить этот плагин

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

то

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

Ответ 7

У меня была такая же проблема с исходным текстом.

Я изменил:

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

к

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

и все работает отлично для меня!

Ответ 8

Это простой способ сказать IE запустить событие изменения при щелчке элемента:

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

Вы можете развернуть это на нечто более общее, чтобы работать с более элементами формы:

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

Ответ 9

Я уверен, что это известная проблема с 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();
    });     
});

Ответ 10

В IE принудительно установите радио и флажки для запуска события "change":

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

Ответ 11

по состоянию на jquery 1.6 это уже не проблема.. не уверен, когда он был исправлен, хотя.. Слава богу за это, хотя

Ответ 12

Если вы измените версию jQuery на 1.5.1, вам не придется настраивать код. Тогда IE9 будет слушать просто отлично:

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

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

Ответ 13

трюк с щелчком работает... но если вы хотите получить правильное состояние радио или флажок, вы можете использовать это:

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

Ответ 14

imo, используя click вместо изменения, делает поведение 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
});

Ответ 15

попробуйте это, он работает для меня

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

Ответ 16

Это может помочь кому-то: Вместо того, чтобы начинать с идентификатора формы, выберите идентификатор select и отправьте форму на изменение, например:

<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 отключен)

Ответ 17

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

Ответ 18

Попробуйте следующее:

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

Ответ 19

Избегайте использования .focus() или .select() перед .change() функцией jquery для IE, тогда он отлично работает, im использует его на моем сайте.

Спасибо

Ответ 20

Попробуйте использовать каждый вместо изменить/ нажмите, который отлично работает даже в первый раз в IE, а также в других браузерах

Не работает в первый раз

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

});

Работает нормально даже в первый раз

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

});