回答編集履歴
4
iOS Safari Mobile で click イベントがバブリングしないバグ
test
CHANGED
|
@@ -102,4 +102,64 @@
|
|
|
102
102
|
|
|
103
103
|
|
|
104
104
|
|
|
105
|
+
|
|
106
|
+
|
|
107
|
+
### iOS Safari Mobile で click イベントがバブリングしないバグ
|
|
108
|
+
|
|
109
|
+
|
|
110
|
+
|
|
111
|
+
jQuery API Document では下記のように書かれています。
|
|
112
|
+
|
|
113
|
+
|
|
114
|
+
|
|
115
|
+
> 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:
|
|
116
|
+
|
|
117
|
+
>
|
|
118
|
+
|
|
119
|
+
> - Use natively clickable elements such as a or button, as both of these do bubble to document.
|
|
120
|
+
|
|
121
|
+
> - Use .on() or .delegate() attached to an element below the level of document.body, since mobile iOS does bubble within the body.
|
|
122
|
+
|
|
123
|
+
> - 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.
|
|
124
|
+
|
|
125
|
+
>
|
|
126
|
+
|
|
127
|
+
> - [.live() | jQuery API Documentation](http://api.jquery.com/live/)
|
|
128
|
+
|
|
129
|
+
|
|
130
|
+
|
|
131
|
+
以下、意訳。
|
|
132
|
+
|
|
133
|
+
|
|
134
|
+
|
|
135
|
+
```
|
|
136
|
+
|
|
137
|
+
MobileiOS（iPhone、iPad、iPod Touch）では、click イベントはほとんどの要素で document, body にバブルしません。次の回避策の1つを使用して下さい。
|
|
138
|
+
|
|
139
|
+
|
|
140
|
+
|
|
141
|
+
- a要素、button要素等のネイティブでクリック可能な要素を使用して下さい。それらの要素は期待通りにバブルされます。
|
|
142
|
+
|
|
143
|
+
- Mobile iOS は document.body 配下の要素にはバブルします。document.body 配下の要素に .on(), .delegate() を適用して下さい。
|
|
144
|
+
|
|
145
|
+
- CSS style の "cursor:pointer" をクリックする要素に適用します。ただし、この適用によって要素のコピー\貼り付けを無効にし、タッチすると強調表示されます。・
|
|
146
|
+
|
|
147
|
+
```
|
|
148
|
+
|
|
149
|
+
|
|
150
|
+
|
|
151
|
+
他、MDN, stackoverflow にも情報があります。
|
|
152
|
+
|
|
153
|
+
|
|
154
|
+
|
|
155
|
+
- [Safari Mobile - click - Event reference | MDN](https://developer.mozilla.org/en-US/docs/Web/Events/click#Safari_Mobile)
|
|
156
|
+
|
|
157
|
+
- [javascript - $(document).click() not working correctly on iPhone. jquery - Stack Overflow](https://stackoverflow.com/questions/3705937/document-click-not-working-correctly-on-iphone-jquery)
|
|
158
|
+
|
|
159
|
+
- [Mouse event bubbling in iOS - QuirksBlog](https://www.quirksmode.org/blog/archives/2014/02/mouse_event_bub.html)
|
|
160
|
+
|
|
161
|
+
|
|
162
|
+
|
|
163
|
+
|
|
164
|
+
|
|
105
165
|
Re: hidepon さん
|
3
idの重複回避
test
CHANGED
|
@@ -38,7 +38,7 @@
|
|
|
38
38
|
|
|
39
39
|
<td>
|
|
40
40
|
|
|
41
|
-
<select name="depos" id="depos" class="form-control pos">
|
|
41
|
+
<select name="depos" id="depos1" class="form-control pos">
|
|
42
42
|
|
|
43
43
|
<option value ="-----">選択してください</option>
|
|
44
44
|
|
|
@@ -60,7 +60,7 @@
|
|
|
60
60
|
|
|
61
61
|
<td>
|
|
62
62
|
|
|
63
|
-
<select name="depos" id="depos" class="form-control pos">
|
|
63
|
+
<select name="depos" id="depos2" class="form-control pos">
|
|
64
64
|
|
|
65
65
|
<option value ="-----">選択してください</option>
|
|
66
66
|
|
2
jsfiddleのサンプル追加
test
CHANGED
|
@@ -1,3 +1,7 @@
|
|
|
1
|
+
### 問題点
|
|
2
|
+
|
|
3
|
+
|
|
4
|
+
|
|
1
5
|
> 追加ボタンを押すと行が追加されます。
|
|
2
6
|
|
|
3
7
|
|
|
@@ -11,6 +15,16 @@
|
|
|
11
15
|
親ノードでイベント定義するか、追加する度に追加するノードにイベント定義して下さい。
|
|
12
16
|
|
|
13
17
|
- 行番号を取得したい場合は `rowIndex` を使用して下さい。
|
|
18
|
+
|
|
19
|
+
|
|
20
|
+
|
|
21
|
+
|
|
22
|
+
|
|
23
|
+
### ソースコード
|
|
24
|
+
|
|
25
|
+
|
|
26
|
+
|
|
27
|
+
- [動的に追加した要素ノードにイベント定義する - JSFiddle](https://jsfiddle.net/rmo5pdcj/)
|
|
14
28
|
|
|
15
29
|
|
|
16
30
|
|
1
markdown修正
test
CHANGED
|
@@ -6,13 +6,11 @@
|
|
|
6
6
|
|
|
7
7
|
|
|
8
8
|
|
|
9
|
-
`jQuert#on` は既存のノードにのみイベント定義され、後から動的に追加されたノードにまでは適用されません。
|
|
9
|
+
- `jQuert#on` は既存のノードにのみイベント定義され、後から動的に追加されたノードにまでは適用されません。
|
|
10
10
|
|
|
11
|
-
親ノードでイベント定義するか、追加する度に追加するノードにイベント定義して下さい。
|
|
11
|
+
親ノードでイベント定義するか、追加する度に追加するノードにイベント定義して下さい。
|
|
12
12
|
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
行番号を取得したい場合は `rowIndex` を使用して下さい。
|
|
13
|
+
- 行番号を取得したい場合は `rowIndex` を使用して下さい。
|
|
16
14
|
|
|
17
15
|
|
|
18
16
|
|