[jquery] 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')");

그리고 모든 것이 나를 위해 잘 작동합니다!