teratail
回答率
85.48%
質問するログイン新規登録
トップに関する質問JavaScriptの一部クリックイベントが登録されない

編集履歴

質問編集履歴

1

コードを追記しました。

2017/11/08 07:43

投稿

okame
okame

スコア54

test CHANGED
File without changes
test CHANGED
@@ -16,18 +16,442 @@
16
16
 
17
17
  ###発生している問題・該当のソースコード
18
18
 
19
+ ```html
20
+
21
+ <!DOCTYPE html>
22
+
23
+ <html>
24
+
25
+ <head>
26
+
27
+ <meta charset="utf-8">
28
+
29
+ <meta name="viewport" content="width=device-width">
30
+
31
+ <title>JS Bin</title>
32
+
33
+ </head>
34
+
35
+ <body>
36
+
37
+ <ol class="breadcrumb">
38
+
39
+ <li class="active">Home</li>
40
+
41
+ <li class="active">管理者一覧</li>
42
+
43
+ </ol>
44
+
45
+
46
+
47
+ <nav aria-label="...">
48
+
49
+ <ul class="pager">
50
+
51
+ <li class="previous"><a onclick="history.back()"><span aria-hidden="true">&larr;</span>戻る</a></li>
52
+
53
+ </ul>
54
+
55
+ </nav>
56
+
57
+
58
+
59
+ <h4 class="page-header">管理者一覧</h4>
60
+
61
+
62
+
63
+ <div style="width:100%;height:300px;overflow:auto;">
64
+
65
+ <table class="table table-striped table-hover">
66
+
67
+ <thead>
68
+
69
+ <tr>
70
+
71
+ <th style="width:3%">#</th>
72
+
73
+ <th style="width:10%">ユーザー名</th>
74
+
75
+ <th style="width:15%">名前</th>
76
+
77
+ <th>備考</th>
78
+
79
+ <th style="width:8%">操作</th>
80
+
81
+ </tr>
82
+
83
+ </thead>
84
+
85
+ <tbody>
86
+
87
+ {% for manager in managers %}
88
+
89
+ <tr>
90
+
91
+ <td>{{ manager.id }}</td>
92
+
93
+ <td>{{ manager.user_name }}</td>
94
+
95
+ <td>{{ manager.last_name }} {{ manager.first_name }}</td>
96
+
97
+ <td>{{ manager.remarks }}</td>
98
+
99
+ <td>
100
+
101
+ <button class="btn btn-default btn-sm" value="{{ manager.id }}">編集</button>
102
+
103
+ <button class="btn btn-default btn-sm delete" value="{{ manager.id }}">削除</button>
104
+
105
+ </td>
106
+
107
+ </tr>
108
+
109
+ {% endfor %}
110
+
111
+ </tbody>
112
+
113
+ </table>
114
+
115
+ </div>
116
+
117
+
118
+
119
+ <button class="btn btn-primary button-center">管理者を追加する</button>
120
+
121
+
122
+
123
+ <div id="modalDelete">
124
+
125
+ <p></p>
126
+
127
+ <button class="btn btn-primary button-center">削除する</button>
128
+
129
+ </div>
130
+
131
+
132
+
133
+ <script src="https://code.jquery.com/jquery.min.js"></script>
134
+
135
+ <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" type="text/css" />
136
+
137
+ <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
138
+
139
+ </body>
140
+
141
+ </html>
142
+
143
+ ```
144
+
145
+
146
+
147
+ ```css
148
+
149
+ /* モーダルウィンドウで表示する要素（通常時は非表示） */
150
+
151
+ #modalDelete {
152
+
153
+ display: none;
154
+
155
+ }
156
+
157
+ /* オーバーレイ要素のスタイル */
158
+
159
+ #modalOverlay {
160
+
161
+ top: 0;
162
+
163
+ left: 0;
164
+
165
+ width: 100%;
166
+
167
+ position: fixed;
168
+
169
+ z-index: 97;
170
+
171
+ background: #000;
172
+
173
+ display: none;
174
+
175
+ }
176
+
177
+ /* モーダルウィンドウ全体のスタイル */
178
+
179
+ #modalWindow {
180
+
181
+ margin-top: -200px;
182
+
183
+ margin-left: -170px;
184
+
185
+ top: 50%;
186
+
187
+ left: 50%;
188
+
189
+ width: 350px;
190
+
191
+ height: 200px;
192
+
193
+ position: fixed;
194
+
195
+ z-index: 98;
196
+
197
+ background: #fff;
198
+
199
+ display: none;
200
+
201
+ }
202
+
203
+ /* モーダルウィンドウ内の閉じるボタンのスタイル */
204
+
205
+ #modalWindow > .modalClose {
206
+
207
+ top: -15px;
208
+
209
+ right: -15px;
210
+
211
+ width: 30px;
212
+
213
+ height: 30px;
214
+
215
+ line-height: 30px;
216
+
217
+ color: #fff;
218
+
219
+ font-size: 1.5em;
220
+
221
+ background: #757575;
222
+
223
+ border-radius: 30px;
224
+
225
+ box-shadow: 0 0 3px 0 #000;
226
+
227
+ position: absolute;
228
+
229
+ z-index: 99;
230
+
231
+ cursor: pointer;
232
+
233
+ text-align: center;
234
+
235
+ }
236
+
237
+ /* コンテンツエリアのスタイル */
238
+
239
+ #modalContents {
240
+
241
+ margin: 30px auto;
242
+
243
+ padding: 0 20px;
244
+
245
+ width: 100%;
246
+
247
+ height: 340px;
248
+
249
+ box-sizing: border-box;
250
+
251
+ overflow-y: auto;
252
+
253
+ }
254
+
255
+ #modalContents p {
256
+
257
+ padding-bottom: 2em;
258
+
259
+ font-size: 1em;
260
+
261
+ text-align: center;
262
+
263
+ margin-top: 30px;
264
+
265
+ }
266
+
267
+ ```
268
+
269
+
270
+
271
+ ```javascript
272
+
273
+ // for manager function
274
+
275
+ (function () {
276
+
277
+ // 削除前確認画面モーダルウィンドウの表示処理
278
+
279
+ document.querySelectorAll('.delete').forEach(function (deleteButton) {
280
+
281
+ deleteButton.addEventListener('click', function() {
282
+
283
+ // 取得前にモーダル内削除ボタンに必要な値を設定
284
+
285
+ var modalDeleteButton = document.querySelector('#modalDelete button');
286
+
287
+ modalDeleteButton.setAttribute('id', 'execDelete'); // 削除実行時のトリガーとしてidをセット
288
+
289
+ // execDelete();
290
+
291
+ modalDeleteButton.setAttribute('value', deleteButton.getAttribute('value')); // 削除するmanager.id
292
+
293
+
294
+
295
+ var td = deleteButton.parentNode.parentNode.querySelector('td:nth-child(2)');
296
+
297
+ document.querySelector('#modalDelete p').textContent = td.textContent + ' を削除しますか？';
298
+
299
+
300
+
301
+ // モーダルウィンドウ内の表示要素を取得
302
+
303
+ var source = document.querySelector('#modalDelete').innerHTML;
304
+
305
+
306
+
307
+ // bodyタグ直前にオーバーレイ要素とモーダルウィンドウ要素を挿入
308
+
309
+ var overlay = document.createElement('div');
310
+
311
+ overlay.setAttribute('id', 'modalOverlay');
312
+
313
+
314
+
315
+ var modalWindow = document.createElement('div');
316
+
317
+ modalWindow.setAttribute('id', 'modalWindow');
318
+
319
+ modalWindow.innerHTML =
320
+
321
+ '<div class="modalClose">×</div>'
322
+
323
+ + '<div id="modalContents">'
324
+
325
+ + source
326
+
327
+ + '</div>';
328
+
329
+
330
+
331
+ document.body.appendChild(overlay);
332
+
333
+ document.body.appendChild(modalWindow);
334
+
335
+
336
+
337
+ // 非表示にしていたオーバーレイ要素とモーダルウィンドウ要素をフェードイン表示
338
+
339
+ var modalElements = document.querySelectorAll('#modalOverlay, #modalWindow');
340
+
341
+ modalElements.forEach(function (element, index) {
342
+
343
+ element.style.display = 'block';
344
+
345
+ element.style.opacity = 0;
346
+
347
+
348
+
349
+ if (index === 0) { // to overlay
350
+
351
+ element.style.height = window.innerHeight + 'px';
352
+
353
+ element.style.opacity = 0.7;
354
+
355
+
356
+
357
+ } else if (index === 1) {
358
+
359
+ element.style.opacity = 1;
360
+
361
+ }
362
+
363
+ });
364
+
365
+
366
+
367
+ // ブラウザウィンドウの高さ変更に合わせてオーバーレイ要素の高さを調整する
368
+
369
+ window.addEventListener('resize', function() {
370
+
371
+ var modalOverlay = document.getElementById('modalOverlay');
372
+
373
+ if (modalOverlay.style.display === 'block') {
374
+
375
+ modalOverlay.style.height = window.innerHeight;
376
+
377
+ }
378
+
379
+ }, false);
380
+
381
+
382
+
383
+ // モーダル閉じるボタンorオーバーレイをクリック時にモーダルウィンドウを閉じる
384
+
385
+ document.querySelectorAll('#modalOverlay, .modalClose').forEach(function (clickElement) {
386
+
387
+ clickElement.addEventListener('click', function() {
388
+
389
+ document.querySelectorAll('#modalWindow, #modalOverlay').forEach(function (removeElement) {
390
+
391
+ // TODO: add fade out animation...
392
+
393
+ removeElement.parentNode.removeChild(removeElement);
394
+
395
+ });
396
+
397
+ }, false);
398
+
399
+ });
400
+
401
+
402
+
403
+ // 削除実行イベント
404
+
405
+ document.getElementById('execDelete').addEventListener('click', function() {
406
+
407
+ console.log('OK'); // <-- モーダル内削除ボタンをクリックしても反応なし。なぜクリックイベントが登録されない？？
408
+
409
+ var ajax = new XMLHttpRequest();
410
+
411
+
412
+
413
+ ajax.onreadystatechange = function () {
414
+
415
+ if(ajax.readyState === XMLHttpRequest.DONE && ajax.status === 200) {
416
+
417
+ console.log(ajax.responseText);
418
+
419
+ }
420
+
421
+ };
422
+
423
+
424
+
425
+ ajax.open('GET', '/admin/staff/delete.php?id=' + this.getAttribute('value'), true);
426
+
427
+ ajax.send(null);
428
+
429
+ }, false);
430
+
431
+ }, false);
432
+
433
+ });
434
+
435
+ })();
436
+
437
+ ```
438
+
439
+
440
+
441
+ jsコードの下の方「// 削除実行イベント」とコメントしているところからの
442
+
443
+ クリックイベント登録コードが該当箇所です。
444
+
445
+
446
+
447
+ ###テスト環境
448
+
19
449
  テスト環境を以下に用意しました。
20
450
 
21
451
  https://jsbin.com/cunirez/edit?html,css,js,output
22
452
 
23
453
 
24
454
 
25
- jsウィンドウ内のコードの下の方「// 削除実行イベント」とコメントしているところからの
26
-
27
- クリックイベント登録コードが該当箇所です。
28
-
29
-
30
-
31
455
  ###以上
32
456
 
33
457
  皆様のお知恵を拝借できれば幸いです。宜しくお願い致します。