IE에서 .change()를 인식하도록 jQuery를 가져오는 중

IE에서 .change()를 인식하도록 jQuery를 가져오는 중

라디오 단추 그룹이 변경/클릭될 때 요소를 숨기거나 표시하기 위해 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>

만약 누군가가 왜 이런 일이 일어나고 어떻게 그것을 고칠 수 있는지에 대해 생각해본다면, 그들은 매우 감사할 것입니다!

대신 를 사용해 보십시오.

사할때문을 할 때의 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
});

이제 변경 이벤트를 정상적으로 사용할 수 있습니다.

편집: 접근성 문제를 방지하기 위해 포커스() 호출을 추가했습니다(아래 바비의 설명 참조).

IE의 숙박업소 변경 이벤트를 시도해 보셨습니까?그게 차이가 있을지는 모르겠지만 시도해 볼 가치가 있을 겁니다.IE는 JS 코드를 통해 값이 업데이트될 때 변경 이벤트를 트리거하지 않지만 이 경우 속성 변경이 작동할 수 있습니다.

$("#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에서 변경 시 다른 브라우저에서 클릭 이벤트를 사용해야 합니다.당신의 기능은 다음과 같습니다.

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

나는 변화 대신 클릭을 사용하면 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
});

이것을 사용해 보세요, 저에게 효과가 있습니다.

$("#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로 시작하는 대신 선택한 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();
});

(Javascript가 비활성화된 경우 제출 버튼은 선택 사항임이 분명합니다.)

다음을 시도합니다.

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

IE에 대해 jquery의 .change() 함수 앞에 .focus() 또는 .select()를 사용하지 않도록 합니다. 그러면 잘 작동합니다. 제 사이트에서 사용하고 있습니다.

감사해요.

//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 () {

});

언급URL : https://stackoverflow.com/questions/208471/getting-jquery-to-recognise-change-in-ie