Bắt jQuery nhận ra .change () trong IE

Tôi đang sử dụng jQuery để ẩn và hiển thị các thành phần khi nhóm nút radio bị thay đổi / nhấp. Nó hoạt động tốt trong các trình duyệt như Firefox, nhưng trong IE 6 và 7, hành động chỉ xảy ra khi người dùng sau đó nhấp vào một nơi khác trên trang.

Để giải thích, khi bạn tải trang, mọi thứ đều ổn. Trong Firefox, nếu bạn nhấp vào nút radio, một hàng trong bảng sẽ bị ẩn và một hàng khác được hiển thị ngay lập tức. Tuy nhiên, trong IE 6 và 7, bạn nhấp vào nút radio và sẽ không có gì xảy ra cho đến khi bạn nhấp vào đâu đó trên trang. Chỉ sau đó IE mới vẽ lại trang, ẩn và hiển thị các yếu tố liên quan.

Đây là jQuery tôi đang sử dụng:

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

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

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

Đây là một phần của XHTML mà nó ảnh hưởng. Toàn bộ trang xác nhận là 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>

Nếu bất cứ ai có bất kỳ ý tưởng tại sao điều này xảy ra và làm thế nào để khắc phục nó, họ sẽ được đánh giá rất cao!

Hãy thử sử dụng .clickthay vì .change.

Vấn đề với việc sử dụng clicksự kiện thay vìchange bạn nhận được sự kiện nếu hộp radio tương tự được chọn (nghĩa là chưa thực sự thay đổi). Điều này có thể được lọc ra nếu bạn kiểm tra xem giá trị mới có khác với giá trị cũ không. Tôi thấy điều này hơi khó chịu.

Nếu bạn sử dụng changesự kiện, bạn có thể nhận thấy rằng nó sẽ nhận ra sự thay đổi sau khi bạn nhấp vào bất kỳ yếu tố nào khác trong IE. Nếu bạn gọi blur()trong clicksự kiện, nó sẽ khiến changesự kiện phát sinh (chỉ khi các hộp radio thực sự có sự thay đổi).

Đây là cách tôi đang làm:

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

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

Bây giờ bạn có thể sử dụng sự kiện thay đổi như bình thường.

Chỉnh sửa: Đã thêm một cuộc gọi để tập trung () để ngăn các sự cố về khả năng truy cập (xem bình luận của Bobby bên dưới).

Bạn đã thử sự kiện onpropertychange của IE chưa? Tôi không biết nếu nó làm cho một sự khác biệt nhưng nó có thể đáng thử. IE không kích hoạt sự kiện thay đổi khi các giá trị được cập nhật thông qua mã JS nhưng có lẽ onpropertychange sẽ hoạt động trong trường hợp này.

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

Điều này cũng nên làm việc:

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

Cảm ơn bến tàu. Điều này rất hữu ích.

Trong IE, bạn phải sử dụng sự kiện nhấp chuột, trong các trình duyệt khác. Chức năng của bạn có thể trở thành

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

thêm plugin này

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

sau đó

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

Tôi đã có cùng một vấn đề với văn bản đầu vào.

Tôi đã thay đổi:

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

đến

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

và mọi thứ đang làm việc tốt cho tôi!

Đây là một cách đơn giản để yêu cầu IE kích hoạt sự kiện thay đổi khi phần tử được nhấp:

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

Bạn có thể mở rộng điều này thành một cái gì đó chung chung hơn để làm việc với nhiều yếu tố hình thức hơn:

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

Tôi khá chắc chắn đây là một vấn đề được biết đến với IE. Thêm một trình xử lý cho onclicksự kiện sẽ khắc phục vấn đề:

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

Trong IE, buộc radio và các hộp kiểm kích hoạt sự kiện "thay đổi":

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

kể từ jquery 1.6, điều này không còn là vấn đề nữa .. không chắc là nó đã được sửa chữa khi nào .. Cảm ơn chúa vì điều đó

Nếu bạn thay đổi phiên bản jQuery thành 1.5.1, bạn sẽ không phải điều chỉnh mã của mình. Sau đó, IE9 sẽ lắng nghe hoàn hảo để:

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

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

Thủ thuật với nhấp chuột hoạt động ... nhưng nếu bạn muốn có trạng thái radio hoặc hộp kiểm chính xác, bạn có thể sử dụng:

(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 sử dụng nhấp thay vì thay đổi làm cho hành vi tức là khác nhau. Tôi muốn mô phỏng hành vi sự kiện thay đổi bằng cách sử dụng bộ đếm thời gian (setTimout).

một cái gì đó như (cảnh báo - mã notepad):

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

Hãy thử nó, nó hoạt động với tôi

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

Điều này có thể giúp ai đó: Thay vì bắt đầu với id của biểu mẫu, hãy nhắm mục tiêu id chọn và gửi biểu mẫu khi thay đổi, như sau:

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

và jQuery:

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

(Rõ ràng, nút gửi là tùy chọn, trong trường hợp javascript bị tắt)

Hãy thử như sau:

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

Tránh sử dụng .f Focus () hoặc .select () trước hàm .change () của jquery cho IE, sau đó nó hoạt động tốt, tôi đang sử dụng nó trong trang web của tôi.

Cảm ơn

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

Vui lòng thử sử dụng từng thay vì thay đổi / nhấp chuột , hoạt động tốt ngay cả lần đầu tiên trong IE cũng như các trình duyệt khác

Không làm việc lần đầu

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

});

Làm việc tốt ngay cả lần đầu tiên

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

});