jQuery:コードをクリップボードへコピー

HTML
1  <div class="box">
2    <div class="code">
3      <p>テキスト</p>
4      <p>テキスト</p>
5    </div>
6    <div class="btn">
7      <p class="copy_btn">ボタン</p>
8    </div>
9  </div>
10
11  <div class="box">
12    <div class="code">
13      <p>ダミー</p>
14      <p>ダミー</p>
15    </div>
16    <div class="btn">
17      <p class="copy_btn">ボタン</p>
18    </div>
19  </div>
20
21
22  <div class="alert_area">
23    <p>コピーしました！</p>
24  </div>

jQuery
1  <script>
2    $(function() {
3
4      $('.alert_area').hide();
5      $('.box').click(function() {
6        var clickbtn = $('<textarea></textarea>');
7        clickbtn.html($(this).parent().find('.code').html());
8        $(this).append(clickbtn);
9        clickbtn.select();
10        document.execCommand('copy');
11        clickbtn.remove();
12        $('.alert_area').show();
13      });
14
15    });
16  </script>

タグ部分をボタンを押した時にクリップボードにコピーできるようにしたいです。現在一つ目の「テキスト」の部分はコピーできるのですが、二つ目の#box内のボタンを押しても「ダミー」がコピーできません。

初心者ですのでコード付きで教えて頂けると助かります。

m.ts10806

2019/09/03 07:11

.alert_area のHTMLもご提示ください。

行動規範の内容に同意します

回答2件

this は .box を指しているので、.parent() ではその上(body?)になってしまいます。

JavaScript
1        //clickbtn.html($(this).parent().find('.code').html());
2        clickbtn.html($('.code', this).html());

投稿2019/09/03 07:47

x_x

総合スコア13749

riii_n

2019/09/03 12:14

解決出来ました！回答ありがとうございます！

行動規範の内容に同意します

ベストアンサー

同ページに同じIDは設置できません。
JavaScript側もHTML上、1番目に出てくる要素にしかイベントが登録されないようになっていますね。
classにするだけでも解決しそうにないので、最も親であるboxのクリックではなくボタンクリックで拾われたほうが良いように思います。

html
1  <div id="box1" class="copy_area">
2    <div id="code1" class="target_code">
3      <p>テキスト</p>
4    </div>
5    <div class="btn">
6      <p class="copy_btn">ボタン1</p>
7    </div>
8  </div>
9
10  <div id="box2" class="copy_area">
11    <div id="code2" class="target_code">
12      <p>ダミー</p>
13    </div>
14    <div class="btn">
15      <p class="copy_btn">ボタン2</p>
16    </div>
17  </div>
18

js
1    $(function() {
2      $('.alert_area').hide();
3      $('.copy_btn').on('click',function() {
4        var clickbtn = $('<textarea></textarea>');
5        clickbtn.html($(this).parent().parent().children('.target_code').html());
6        $(this).append(clickbtn);
7        clickbtn.select();
8        document.execCommand('copy');
9		console.log(clickbtn.html());
10        clickbtn.remove();
11        $('.alert_area').show();
12      });
13    });