- ベストアンサー
IE8でselectのchangeイベントが2回起きる原因と一度だけイベントを取得する方法
- IE8を使用している場合、selectのchangeイベントが2回起きてしまうことがあります。
- これは、IE8のバグによるものであり、回避方法があります。
- select要素に対して一度だけイベントを取得するには、changeイベントハンドラを削除してから再度追加する方法があります。
- aodesu55
- お礼率87% (7/8)
- JavaScript
- 回答数2
- ありがとう数2
- みんなの回答 （2）
- 専門家の回答
質問者が選んだベストアンサー
こんにちは。 原因がわかってよかったです。 うちの会社の開発では 全ページで使うような機能をcommon.js 各機能単位で使うような機能を[機能名].js その末端で使う機能を[ページID].js のような感じで外部jsとして読み込んでいます。 もちろん、common.jsを読み込んでいるけど使っていないページも多々ありますが各末端のページでは上の三つを必ず読み込んでます。
その他の回答 (1)
- LancerVII
- ベストアンサー率51% (1060/2054)
こんにちは。 #alistのchangeイベントで実行されるのは $('#alist').change(function() { $.getJSON ( "q7252891.php", {}, function(data) { alert ( data.status + ":" + data.m ); }); }); ここの部分1回だけだと思います。 (実際に動かしてみました) $(function() { alert("a"); $('#alist').change(function() { $.getJSON("php/yyy.php", XXX, function(data) { }); 以下、かっこを閉じる。 この関数はどこに設定されていますか？ >changeイベントが２回起きてしまいます（"a"のalertが２回出る。） alert("a")はchangeイベントに設定されていない状態です。 2回呼ばれるようなところに登録していると2回呼ばれてしまいます。 以下ソースでは1回で確認できています。 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>selectのchangeイベントの回数</title> <style type="text/css"> </style> <script type="text/javascript" src="https://www.google.com/jsapi"></script> <script type="text/javascript">google.load('jquery','1');</script> <script type="text/javascript"> $(function() { alert ( "a" ); $('#alist').change(function() { $.getJSON ( "q7252891.php", {}, function(data) { alert ( data.status + ":" + data.m ); }); }); }); </script> </head> <body> <select name="test" id="alist"> <option value="1">1</option> <option value="2">2</option> <option value="3">3</option> <option value="4">4</option> <option value="5">5</option> </select> </body> </html>
お礼
わざわざありがとうございました。原因が分かりました。 複数の機能があるWebを作っていて、 機能ごとにjavascriptファイルを分けて開発をしておりました。（機能１.js, 機能２.js ,,, etc） そして、各機能で共通の処理が一部あるので、それはまた別ファイル（共通.js）にして切り出し、 javascriptのファイル内（機能１.js、機能２.js）でdocument.write( '<script > ～</script>）のように記載しておりました。 問題の関数（Jqueryのイベントハンドラ）は、共通.jsに記載していて、 機能１と機能２のそれぞれのjsファイルでdocument.writeと記載しているため、実体が複数インクルードされる形（表現は適切ではないかもしれません。）となってしまっていたようです。 結果、イベントは１回しか起きませんが、そのハンドラが２個存在するようになって、２回イベントが発生するように見えていました。（←推測です。） document.writeで書くのはやめて、TOPのhtmlですべての外部ファイルを読み込むように記載したら直りました。 ただ、機能３.jsでは共通.jsは不要であり、機能３.jsは使わない場合もあるので、そんなケースの場合は機能３.jsの情報の読み込み無駄になってしまうのが個人的には気になっています。 そんなことは気にしないのが普通なのでしょうか。 当初の質問とは逸れてしまいますが、何かコメントあればいただけないでしょうか。
お礼
ありがとうございました。参考になりました。