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

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

Answer 2

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

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

Answer 3

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

Answer 4

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

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

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

});

Отлично работает даже в первый раз

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

});

Answer 5

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

Спасибо

Answer 6

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

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

Answer 7

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

Answer 8

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

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

Answer 9

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

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

Answer 10

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