Q:

Copy element content to clipboard on click using jquery

Is there a way to copy to clipboard an element content by clicking on other element?
I saw lots of related problems, but I don't like the approach of using function.
since the data is from the database.
here's my sample code.
CODEPEN

$(document).ready(function(){
  $(".click .copy").click(function(){
      $(this).closest("click").find("span").text();
      document.execCommand("Copy");
  });
 });
.click{
  padding: 10px;
}
.click .copy{
background-color: rgba(0,0,0,.8);
padding: 3px;
border-radius: 12px;
position: absolute;
margin-top: -2px;
width: 80px;
cursor: pointer;
color: #f7cc83;
display: none;
  text-align: center;
}
.click:hover .copy{
 display: block;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="click">
  <div class="copy">copy text</div>
  <span>copy this text 1</span>
</div>
<div class="click">
  <div class="copy">copy text</div>
  <span>copy this text 2</span>
</div>
<div class="click">
  <div class="copy">copy text</div>
  <span>copy this text 3</span>
</div>

A:

refer

function copyToClipboard(element) {
  var $temp = $("<input>");
  $("body").append($temp);
  $temp.val($(element).text()).select();
  document.execCommand("copy");
  $temp.remove();
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<p id="p1">P1: I am paragraph 1</p>
<p id="p2">P2: I am a second paragraph</p>
<button onclick="copyToClipboard('#p1')">Copy P1</button>
<button onclick="copyToClipboard('#p2')">Copy P2</button>
<br/><br/><input type="text" placeholder="Paste here for test" />

A:

You have not use .click and instead used click as the element. You could debug this by seeing the init method of the jquery not being able to find the element based on the criteria.

$(document).ready(function(){
    $(".click .copy").click(function(event){
    var $tempElement = $("<input>");
        $("body").append($tempElement);
        $tempElement.val($(this).closest(".click").find("span").text()).select();
        document.execCommand("Copy");
        $tempElement.remove();
    });
});
.click{
  padding: 10px;
}
.click .copy{
background-color: rgba(0,0,0,.8);
padding: 3px;
border-radius: 12px;
position: absolute;
margin-top: -2px;
width: 80px;
cursor: pointer;
color: #f7cc83;
display: none;
  text-align: center;
}
.click:hover .copy{
 display: block;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="click">
  <div class="copy">copy text</div>
  <span>copy this text 1</span>
</div>
<div class="click">
  <div class="copy">copy text</div>
  <span>copy this text 2</span>
</div>
<div class="click">
  <div class="copy">copy text</div>
  <span>copy this text 3</span>
</div>

