器用貧乏です。はげたかです。日記です。

どうも、はげたかです。今まで器用貧乏に生きてきました。ジェネラリスト・フルスタックエンジニアを目指しています。

今日の一言:カテゴリ分けをしっかりしたらPVあがるかな?

jQueryでev, uiからゴリ押しで取得するとIEに対応できない話

はじめに

先生(非常勤講師)の旦那さんからPHPで処理が行っているスケジュール管理サービスのJavaScript化(データベース等はPHPを用いているが)を頼まれた。

始めての仕事ということで、すごく緊張しながらやっている。コードの綺麗さ・処理の早さ等も気にしたいところだが、納期が定められていないため、できるだけ早くやろうとしていてリファクタリングをしていないのが現状。

jQueryで処理していたモノをIEに対応させるノウハウを残しておく。

現状

簡単に処理のコードを書く。処理の概要は クリックしたら、ダイアログを表示し、クリックしたセル番地の情報を元に初期表示を行うもの。

  • html
<td data-name="hogehoGet" data-date="20141223"></td>
$(td .item).bind('click', function(event){
  var data_name = event.target.attributes[1].value; // hogehoGet
  var data_date = event.target.attributes[2].value; //20141223
  showDialog(data_name, data_date);
})

function showDialog(name, date){
  $(".dialog_content").html(name);
  $(".dialog_date").html(date);
}

イベントって?

  • クリック時
$(' td .item').bind('click', function(event){
  console.log(event);   
})

上記のコードを入力し、クリックすると...

jQuery.Event {originalEvent: MouseEvent, type: "click", isDefaultPrevented: function, timeStamp: 1419265566784, jQuery1111029520493652671576: true…}

このように、たどればどのデータも取得できるからうおおおおおって感じで、ゲットしていた。

しかし、これはChromeのみの情報であってIEに対応していない(その他ブラウザは確認していない) eventがゲットできないので、IEでは当然エラーが起きる

解決方法

単純な問題であった。。。

$(' td .item').bind('click', function(event){
  data_name = $(this).attr("data-name");
  data_date = $(this).attr("data-date");
})

これでよかった。無理にDOMを回るのではなくて、リファレンスを見ればもっとスマートにゲットできることがわかった。後は、やってみること。

最初は、

console.log(this)

でうまく取得できなかったため、諦めたが、

console.log($(this))

を用いないと、jQueryの型にならなくて、取得できないわけだ。まずはいろいろやってみることだぁ〜〜

無事IE対応が終わり、残りはチェックしてもらうだけだ。