デザイナーさんがデザイン適用したらjQueryでOnClick制御していたイベントが発生せず。嵌まり。
その時の対応メモ
状況
原因としては、SELECTボックスをリッチにするために easyselectbox.jsを使っていたため。このjsでは元々のSELECTタグを非表示(display:none;)にしてdiv型DOMを動的に生成してデザイン表示代替して処理しているので、変更してもSELECTタグのOnChangeイベントが発生しないのが原因。
対処
デザイナーさん適用前の元々のうまく動いていたシンプルなソースはこんな感じ。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 |
<!-- 会社の選択 --> <select id="inp_company" name="inp_company"> <option>.... </select> <script type="text/javascript"> jQuery(function($) { // 会社の選択変更 $("#inp_company").change(function () { return onChangeCompany(); }); } function onChangeCompany(){ alert('変更されたよ'); } </script> |
変更前
|
1 2 3 4 5 6 7 |
<script type="text/javascript" src="../js/easyselectbox.min.js"></script> <script type="text/javascript"> $(function() { $('#inp_company').easySelectBox({speed:200}); }); </script> |
修正対応後
|
1 2 3 4 5 6 7 8 9 10 11 |
<script type="text/javascript" src="../js/easyselectbox.min.js"></script> <script type="text/javascript"> $(function() { $('#inp_company').easySelectBox({onClick: function(data) { $('#inp_company').trigger('change'); }, speed:200 }); }); </script> |
参考ページ
Github-easyselectbox.js
cly7796.net-easyselectbox.jsの使い方まとめ
Yahoo知恵袋-セレクトボックスのjQueryプラグインで