ทำให้ 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 เข้มงวด

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

ตอนนี้คุณสามารถใช้เหตุการณ์การเปลี่ยนแปลงได้ตามปกติ

แก้ไข: เพิ่มการโทรเพื่อโฟกัส () เพื่อป้องกันปัญหาการเข้าถึง (ดูความคิดเห็นของ Bobby ด้านล่าง)

คุณเคยลองกิจกรรม onpropertychange ของ IE หรือไม่? ฉันไม่รู้ว่ามันสร้างความแตกต่างได้หรือเปล่า แต่ก็น่าลอง 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 คุณต้องใช้เหตุการณ์การคลิกในเบราว์เซอร์อื่น 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();
                    });     
});

เพิ่มปลั๊กอินนี้

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 โดยใช้การคลิกแทนการเปลี่ยนแปลงทำให้พฤติกรรม ie แตกต่างกัน ฉันอยากจะเลียนแบบพฤติกรรมเหตุการณ์การเปลี่ยนแปลงโดยใช้ตัวจับเวลา (setTimout)

บางอย่างเช่น (คำเตือน - รหัส 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
});

ลองนี้มันได้ผลสำหรับฉัน

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

สิ่งนี้อาจช่วยใครบางคนได้: แทนที่จะเริ่มต้นด้วย id ของแบบฟอร์มให้กำหนดเป้าหมายรหัสที่เลือกและส่งแบบฟอร์มเมื่อมีการเปลี่ยนแปลงดังนี้:

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

(เห็นได้ชัดว่าปุ่มส่งเป็นทางเลือกในกรณีที่จาวาสคริปต์ถูกปิดใช้งาน)

ลองทำดังต่อไปนี้:

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

หลีกเลี่ยงการใช้. focus ()หรือ . select ()ก่อน. เปลี่ยนฟังก์ชั่น()ของ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 () {

});