jQuery EasySelectBox Pluginを利用している場合に、<select>タグのchangeイベントを捕捉できなかったので、その時のメモ。

要約

EasySelectBoxのonClickではなく、jQueryの on('change') で<select>タグの変化を認識したい。というお話し。

前提

以下のようなHTMLでEasySelectBoxを使っているとします。

<script type="text/javascript">
  $(function () {
    $('#select').on('change', function () {
      alert('選択は ' + $(this).val() + 'だよ');
    });

    $('#select').easySelectBox();
  });
</script>

<select name="select" id="select">
  <option value="A">A</option>
  <option value="B">B</option>
</select>

ここで期待しているのは、<select> の選択が切り替わったら
「選択は A だよ」
とか
「選択は B だよ」
とアラートがでることなのですが選択を切り替えても何もおきません…。

って、これだけであればEasySelectBoxの初期化時にオプションで onClick を指定すれば解決です。

$('#select').easySelectBox({
  onClick: function (data) {
    alert('選択は ' + data.text + ' だよ');
  }
});

こんな感じ。

でも・・・元々 $('#select').on('change', ...) で処理を作ってある場合、全部書き直すのか！？！！
とか、$('.select').easySelectBox() とクラスセレクタ使ってるから個別にonClickイベントの指定なんて出来ないぞ！！
ということが起こる。
(自分の場合は、コーダーから貰ったHTMLにEasySelectBoxが使われてて on('change') が呼ばれなくなった。。。)

そこで、これ

$('#select').easySelectBox({
  onClick: function (data) {
    var selectObj = $(this).data('easySelectData').selectObj;
    selectObj.trigger('change');
  }
});

こうすると、元々処理を書いておいた <select> に対して change イベントが発火されてJavaScriptの書き換えが最小限で済む＋EasySelectBoxを使わなくなったとしても大丈夫。

懸念としては、EasySelectBoxの内部構造が変わって

$(this).data('easySelectData').selectObj;

が使えなくなるかもというところかな。

雑感

EasySelectBox、見た目はいいんだろうけどプログラマブルには使いにくかったな。。。
この他にも、動的に<select>の中の<option>を作り替えてもEasySelectBoxの初期化時にリストが作られてしまっているから反映されないとか・・・(DOMオブジェクト作り直して対応)

EasySelectBoxで元々のchangeを呼ぶ

要約

前提

雑感