《解決編》Re: Firefoxでリロードした時に要素をjQueryの「:eq(n)」で選択しようとしても正しく選択できない


  • 公開:
  • 更新:
  • 編集:
概要 ▶ Mozilla pins (wallpaper) by flod「Firefoxでリロードした時に要素をjQueryの「:eq(n)」で選択しようとしても正しく選択できない」の解決編です。「jQueryで要素を並び替えて、要素内の指定したradioボタンをdisabledにする」ということを行うJavaScriptを書いたページをFirefox 11でリロードすると、指定したradioボタン以外も
Mozilla pins (wallpaper) by flod


Firefoxでリロードした時に要素をjQueryの「:eq(n)」で選択しようとしても正しく選択できない」の解決編です。


「jQueryで要素を並び替えて、要素内の指定したradioボタンをdisabledにする」ということを行うJavaScriptを書いたページをFirefox 11でリロードすると、指定したradioボタン以外もdisabledになってしまう…といった問題が発生しました。


この問題を解決します。
とはいってもFirefox自体を修正しているわけではないので、根本的な解決策ではありませんが。


解決策は至って簡単です。

この問題への考察

今回の問題はブラウザのキャッシュの問題と考えています。

ページをロードした初回はこの問題は発生せず、リロード時で発生します。
また、スーパーリロード(Shiftキーを押しながらリロードボタン)では、この問題は再現されませんでした。

このため、ブラウザのキャッシュに残っている要素にdisabledの属性が付いてしまっているのではないかと考えました。

ただ、キャッシュを消してリロードしても、「Web Developer」の機能拡張(アドオン)をインストールし、「キャッシュを無効にする」設定でリロードしても、意図しないradioボタンがdisabledになってしまう問題は発生してしまうので、単純なブラウザのキャッシュというわけではないようです。



解決方法

指定した要素のdisabledの属性を「true」と設定する前に、全ての要素のdisabledの属性を「false」に設定します。


かなり力業ですが、別の要素に次々とdisabledの属性が転移してしまうような状態なので、処理前に初期化のごとく、falseの値を設定します。

今回の例だと以下のJavaScriptを付け加えます。

jQuery("#form-20120405 dd input").attr("disabled",false);


最終的にできたJavaScriptは以下の通りです。
<script type="text/javascript">
	jQuery(document).ready(function(){
		var array_dt = jQuery("#form-20120405 dt");
		var array_dd = jQuery("#form-20120405 dd");
		
		jQuery("#form-20120405 dl").empty()
			.append(jQuery(array_dt.get(0)),
					jQuery(array_dd.get(0)),
					jQuery(array_dd.get(2)),
					jQuery(array_dd.get(3)),
					jQuery(array_dd.get(1)),
					jQuery(array_dd.get(4)),
					jQuery(array_dd.get(5)));
		jQuery("#form-20120405 dd input").attr("disabled",false);
		jQuery("#form-20120405 dd:eq(1) input").attr("disabled",true);
	}):
</script>


動作検証用の実例

動作検証用の実例を以下に作ってみました。リロードしても意図しないradioボタンがdisabledにはならないのが確認できると思います。

テスト
サンプル0



この問題はmozillaに報告すれば良いのかしら。
どうしたら良いのでしょうかねぇ…。


カテゴリー:

このページをぜひシェアしてください