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

왜 이런 일이 일어나고 고쳐야하는지에 대한 아이디어가 있다면 대단히 감사하겠습니다!

답변

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

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

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

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