Cómo copiar usando clipboard.js con contenido dinámico y disparadores

Después de hacer clic en.fw-code-copy-button Me gustaría copiar el código fuente de su contenedor más cercano..fw-code-copy-button-s se crean dinámicamente, después de que el usuario haga clic en el botón dedicado "ver fuente".

Html por ejemplo botón:

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

Así es como disparo el evento click y defino el código fuente que se copiará en el portapapeles:

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

Y asi es comoclipboard.js desencadena su evento de copia

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

Cada vez que hago clic en cualquier lugar del sitio web, aparece el siguiente error:

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

Pero antes que nada no quiero definir el texto para copiardata-clipboard-text="..." y en segundo lugardata-clipboard-text se define con"..." como su valor

Si alguien pagara un segundo, estaría muy agradecido.

[editar] He escrito jsFiddle para demostración y, sorprendentemente, UncaughtError desapareció, pero aún necesito movermesource código de onClick al Portapapeles.

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

Respuestas a la pregunta(2)

Su respuesta a la pregunta