[解決済み] IEでjQueryが.change()を認識するために

質問

ラジオボタンのグループが変更されたりクリックされたりしたときに、要素を隠したり表示したりするためにjQueryを使用しています。Firefox などのブラウザでは正常に動作しますが、IE 6 および 7 では、ユーザーがページ上の他の場所をクリックしたときにのみアクションが発生します。

詳しく説明すると、ページを読み込むと、すべてが正常に見えます。Firefox では、ラジオ ボタンをクリックすると、1 つのテーブル行が非表示になり、もう 1 つのテーブル行がすぐに表示されます。しかし、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 .