回答編集履歴

2

追加

2017/07/31 13:52

投稿

yambejp
yambejp

スコア117820

answer CHANGED
@@ -1,4 +1,4 @@
1
- getElemensXXXなどHTMLCollectionで指定したものは生きているので
1
+ getElementsXXXなどHTMLCollectionで指定したものは生きているので
2
2
  後からでも参照できますよ
3
3
  querySelectorALLで受け取るとNodeListで死んでいるので、
4
4
  場合によっては処理ごとに再設定する必要があります
@@ -19,5 +19,29 @@
19
19
  <div>
20
20
  <button class="add_btn">追加</button>
21
21
  </div>
22
+ ```
22
23
 
24
+ # 再度sample
25
+
26
+ うまくつたわっていないようなので再sample
27
+ このままHTMLにコピペして追加でもjQueryで追加でも両方alertがでることを確認してください
28
+ ```javascript
29
+ <script>
30
+ document.addEventListener('click',function(e){
31
+ var t=e.target;
32
+ if(t.classList.contains('add_btn')){
33
+ alert('hoge');
34
+ }
35
+ });
36
+ </script>
37
+ <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
38
+ <script>
39
+ $(function(){
40
+ $(".add_btn").after($('<button>').addClass('add_btn').text('jQueryで追加'));
41
+ });
42
+ </script>
43
+ <div>
44
+ <button class="add_btn">追加</button>
45
+ </div>
46
+
23
47
  ```

1

追記

2017/07/31 13:52

投稿

yambejp
yambejp

スコア117820

answer CHANGED
@@ -1,4 +1,23 @@
1
1
  getElemensXXXなどHTMLCollectionで指定したものは生きているので
2
2
  後からでも参照できますよ
3
3
  querySelectorALLで受け取るとNodeListで死んでいるので、
4
- 場合によっては処理ごとに再設定する必要があります
4
+ 場合によっては処理ごとに再設定する必要があります
5
+
6
+ # 追記
7
+
8
+ 上記とは若干主旨がかわりますが、こんな感じでどうでしょう?
9
+ ```ここに言語を入力
10
+ document.addEventListener('click',function(e){
11
+ var t=e.target;
12
+ if(t.classList.contains('add_btn')){
13
+ var c=t.cloneNode(true);
14
+ t.parentNode.appendChild(c);
15
+ }
16
+ });
17
+ ```
18
+ ```HTML
19
+ <div>
20
+ <button class="add_btn">追加</button>
21
+ </div>
22
+
23
+ ```