How to copy using clipboard.js with dynamic content and triggers

Question

After a click on .fw-code-copy-button I would like to copy source code from it's nearest container. .fw-code-copy-button -s are created dynamically, after user click dedicated "view source" button.

Html for example button:

<span class="fw-code-copy">
  <span class="fw-code-copy-button" data-clipboard-text="...">copy</span>
</span>

This is how i trigger click event, and define the source code to be copied to clipboard:

$(document).on("click", ".fw-code-copy-button", function(){
  var source = $(this).closest(".fw-code-copy").next("code").text();
});

And this is how clipboard.js triggers it's copy event

new Clipboard(".fw-code-copy-button", {
  text: function(trigger) {
    return source; // source should somehow be copied from scope above it
  }
});

Whenever i click anywhere on the website, the following error appears:

Uncaught Error: Missing required attributes, use either "target" or "text"

But first of all I don't want to define text to be copied in data-clipboard-text="..." and secondly data-clipboard-text is defined with "..." as it's value.

If someone would pay a second i would be very grateful.

[edit] I have written jsFiddle for demonstration, and suprisingly UncaughtError disappeared, but i still need to move source code from onClick to Clipboard scope.

https://jsfiddle.net/2rjbtg0c/1/

Answer 1

According to your original code:

 new Clipboard(".fw-code-copy-button", {
  text: function(trigger) {
    return $(trigger).closest(".fw-code-copy").next("code").text(); 
  }
});

Answer 2

The trigger is the button you clicked. Get the parent and then return the text inside the code block. You will also need to trim any leading and trailing white-space.

Demo

This grabs text inside a code block as in your included example

 new Clipboard(".fw-code-copy-button", { text: function(trigger) { return $(trigger).parent().find('code').first().text().trim(); } }); 

 .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; } 

 <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>&lt;link rel=&quot;stylesheet&quot; href=&quot;style-1.css&quot;&gt;</code> </span> <span class="fw-code-copy"> <span class="fw-code-copy-button">Copy</span> <code>&lt;link rel=&quot;stylesheet&quot; href=&quot;style-2.css&quot;&gt;</code> </span> <span class="fw-code-copy"> <span class="fw-code-copy-button">Copy</span> <code>&lt;link rel=&quot;stylesheet&quot; href=&quot;style-3.css&quot;&gt;</code> </span>