IE에서 jQuery가 .change ()를 인식하도록하기

라디오 버튼 그룹을 변경하거나 클릭 할 때 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.

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 () 호출을 추가했습니다 (아래 Bobby의 의견 참조).

IE의 onpropertychange 이벤트를 사용해 보셨습니까? 차이가 나는지 모르겠지만 시도해 볼 가치가 있습니다. JS 코드를 통해 값이 업데이트 될 때 IE는 변경 이벤트를 트리거하지 않지만이 경우에는 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에서는 변경시 다른 브라우저에서 클릭 이벤트를 사용해야합니다. 당신의 기능이 될 수 있습니다

$(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는 동작을 다르게 만듭니다. 오히려 타이머 (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();
});

(자바 스크립트가 비활성화 된 경우 제출 버튼은 선택 사항입니다)

다음을 시도하십시오 :

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

jquery의 .change () 함수 전에 .focus () 또는 .select () 를 사용하지 마십시오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와 다른 브라우저에서도 처음으로 잘 작동하는 change / click 대신 각각을 사용해보십시오.

처음으로 작동하지 않음

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

});

처음부터 잘 작동

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

});