Получение jQuery для распознавания .change () в IE

Question

Я использую 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>

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

Answer 1

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

Answer 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 () для предотвращения проблем с доступностью (см. Комментарий Бобби ниже).

Answer 3

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

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

Answer 4

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

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

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

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

Answer 6

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

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

затем

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

Answer 7

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

Я изменил:

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

до

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

и у меня все работает нормально!

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

Answer 9

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

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

Answer 10

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

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

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