click and copy jquery dynamic content
Works great with Dynamically created list. Reading in from a database.
<style type="text/css">
.fw-code-copy {
display: block;
position: relative;
width: 400px;
height: 30px;
background: #FFE;
border: thin solid #FF0;
margin-bottom: 0.5em;
padding: 0.5em;
}
.fw-code-copy-button {
position: absolute;
top: 8px;
right: 8px;
padding: 0.25em;
border: thin solid #777;
background: #800080;
color: #FFF;
}
.fw-code-copy-button:hover {
border: thin solid #DDD;
background: #992699;
cursor: pointer;
}
</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/clipboard.js/1.5.3/clipboard.min.js"></script>
<span class="fw-code-copy">
<span class="fw-code-copy-button">Copy</span>
<code><link rel="stylesheet" href="style-1.css"></code>
</span>
<span class="fw-code-copy">
<span class="fw-code-copy-button">Copy</span>
<code><link rel="stylesheet" href="style-2.css"></code>
</span>
<span class="fw-code-copy">
<span class="fw-code-copy-button">Copy</span>
<code><link rel="stylesheet" href="style-3.css"></code>
</span>
<script>
new Clipboard(".fw-code-copy-button", {
text: function(trigger) {
return $(trigger).parent().find('code').first().text().trim();
}
});
</script>