問題点
追加ボタンを押すと行が追加されます。
大体想像はつきますが、再現性の為に「行を追加するコード」も追記した方が良いと思います。
jQuert#on
は既存のノードにのみイベント定義され、後から動的に追加されたノードにまでは適用されません。
親ノードでイベント定義するか、追加する度に追加するノードにイベント定義して下さい。
- 行番号を取得したい場合は
rowIndex
を使用して下さい。
ソースコード
JavaScript
1<table class="table" id="tbl">
2 <tbody>
3 <tr>
4 <td>
5 <select name="depos" id="depos1" class="form-control pos">
6 <option value ="-----">選択してください</option>
7 <option value ="45">制作</option>
8 <option value ="46">企画</option>
9 </select>
10 </td>
11 <td><input type="text" name="note1" class="note" /></td>
12 <td><input type="button" value="登録" class="add" /></td>
13 </tr>
14 <tr>
15 <td>
16 <select name="depos" id="depos2" class="form-control pos">
17 <option value ="-----">選択してください</option>
18 <option value ="45">制作</option>
19 <option value ="46">企画</option>
20 </select>
21 </td>
22 <td><input type="text" name="note1" class="note" /></td>
23 <td><input type="button" value="登録" class="add" /></td>
24 </tr>
25 </tbody>
26</table>
27<p><button id="add" name="addrow">追加</button><p>
28
29<script>
30'use strict';
31jQuery('#tbl').on('change', '.pos', function (event) {
32 alert(event.currentTarget.parentNode.parentNode.rowIndex);
33});
34</script>
iOS Safari Mobile で click イベントがバブリングしないバグ
jQuery API Document では下記のように書かれています。
On mobile iOS (iPhone, iPad and iPod Touch) the click event does not bubble to the document body for most elements and cannot be used with .live() without applying one of the following workarounds:
-
Use natively clickable elements such as a or button, as both of these do bubble to document.
-
Use .on() or .delegate() attached to an element below the level of document.body, since mobile iOS does bubble within the body.
-
Apply the CSS style cursor:pointer to the element that needs to bubble clicks (or a parent including document.documentElement). Note however, this will disable copy\paste on the element and cause it to be highlighted when touched.
-
.live() | jQuery API Documentation
以下、意訳。
MobileiOS(iPhone、iPad、iPod Touch)では、click イベントはほとんどの要素で document, body にバブルしません。次の回避策の1つを使用して下さい。
- a要素、button要素等のネイティブでクリック可能な要素を使用して下さい。それらの要素は期待通りにバブルされます。
- Mobile iOS は document.body 配下の要素にはバブルします。document.body 配下の要素に .on(), .delegate() を適用して下さい。
- CSS style の "cursor:pointer" をクリックする要素に適用します。ただし、この適用によって要素のコピー\貼り付けを無効にし、タッチすると強調表示されます。・
他、MDN, stackoverflow にも情報があります。
Re: hidepon さん
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2017/05/24 07:05
2017/05/24 08:37
2017/05/24 08:52