Copy element content to clipboard on click using jquery

Question

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>

Answer 1

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>