回答編集履歴
6
追記、修正
test
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
質問文にあるとおり、**動的に変更した DOM には、ページ表示時に設定したイベントが効かない**ため、質問文のような動作になっています。
|
|
2
2
|
|
|
3
|
-
他の回答にあるように、
|
|
3
|
+
他の回答にあるように、各要素が共有するクラス名でイベントを設定するか、jQuery のコードを以下のように修正することでこの問題は解決すると思います([動作確認用リンク](https://codepen.io/anon/pen/xQadwv))。
|
|
4
4
|
|
|
5
5
|
```jQuery
|
|
6
6
|
|
|
@@ -17,3 +17,11 @@
|
|
|
17
17
|
});
|
|
18
18
|
|
|
19
19
|
```
|
|
20
|
+
|
|
21
|
+
|
|
22
|
+
|
|
23
|
+
なぜ上記のコードでうまくいくのかは、以下の記事を読むとわかると思います。
|
|
24
|
+
|
|
25
|
+
- [【jQuery】onメソッドの使用方法 - Qiita](https://qiita.com/katsunory/items/7b50d399329767a893e1#selector%E3%81%A7%E3%82%A4%E3%83%99%E3%83%B3%E3%83%88%E3%83%87%E3%83%AA%E3%82%B2%E3%83%BC%E3%83%88)
|
|
26
|
+
|
|
27
|
+
- [イベントデリゲートで理解するjQueryのonメソッド - to-R](http://blog.webcreativepark.net/2013/12/01-215447.html)
|
5
修正
test
CHANGED
|
File without changes
|
4
追記
test
CHANGED
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
**動的に変更した DOM には、ページ表示時に設定したイベントが効かない**ため、質問文のような動作になっています。
|
|
1
|
+
質問文にあるとおり、**動的に変更した DOM には、ページ表示時に設定したイベントが効かない**ため、質問文のような動作になっています。
|
|
2
2
|
|
|
3
3
|
他の回答にあるように、他のクラス名でイベントを設定するか、jQuery のコードを以下のように修正することでこの問題は解決すると思います([動作確認用リンク](https://codepen.io/anon/pen/xQadwv))。
|
|
4
4
|
|
3
修正
test
CHANGED
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
動的に変更した DOM には、ページ表示時に設定したイベントが効かないため、質問文のような動作になっています。
|
|
1
|
+
**動的に変更した DOM には、ページ表示時に設定したイベントが効かない**ため、質問文のような動作になっています。
|
|
2
2
|
|
|
3
3
|
他の回答にあるように、他のクラス名でイベントを設定するか、jQuery のコードを以下のように修正することでこの問題は解決すると思います([動作確認用リンク](https://codepen.io/anon/pen/xQadwv))。
|
|
4
4
|
|
2
修正
test
CHANGED
|
@@ -4,11 +4,15 @@
|
|
|
4
4
|
|
|
5
5
|
```jQuery
|
|
6
6
|
|
|
7
|
-
$(document).on("
|
|
7
|
+
$(document).on("turbolinks:load", function() {
|
|
8
8
|
|
|
9
|
-
$(
|
|
9
|
+
$(document).on("click", ".unselected", function() {
|
|
10
10
|
|
|
11
|
+
$(".left, .right").toggleClass("selected unselected");
|
|
12
|
+
|
|
11
|
-
$("#left_content, #right_content").toggle();
|
|
13
|
+
$("#left_content, #right_content").toggle();
|
|
14
|
+
|
|
15
|
+
});
|
|
12
16
|
|
|
13
17
|
});
|
|
14
18
|
|
1
追記
test
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
動的に変更した DOM には、ページ表示時に設定したイベントが効かないため、質問文のような動作になっています。
|
|
2
2
|
|
|
3
|
-
他のクラス名でイベントを設定するか、以下のようにすることでこの問題は解決すると思います([動作確認用リンク](https://codepen.io/anon/pen/xQadwv))。
|
|
3
|
+
他の回答にあるように、他のクラス名でイベントを設定するか、jQuery のコードを以下のように修正することでこの問題は解決すると思います([動作確認用リンク](https://codepen.io/anon/pen/xQadwv))。
|
|
4
4
|
|
|
5
5
|
```jQuery
|
|
6
6
|
|