Como copiar usando clipboard.js com conteúdo dinâmico e gatilhos

Após um clique em.fw-code-copy-button Gostaria de copiar o código fonte do contêiner mais próximo..fw-code-copy-button-s são criados dinamicamente, depois que o usuário clica no botão dedicado "visualizar fonte".

Botão HTML, por exemplo:

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

É assim que eu aciono o evento click e defino o código-fonte a ser copiado para a área de transferência:

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

E é assim queclipboard.js aciona seu evento de cópia

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

Sempre que clico em qualquer lugar do site, o seguinte erro aparece:

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

Mas antes de tudo, não quero definir o texto a ser copiadodata-clipboard-text="..." E em segundo lugardata-clipboard-text é definido com"..." como é valor.

Se alguém pagasse um segundo, ficaria muito grato.

[editar] Escrevi o jsFiddle para demonstração e surpreendentemente o UncaughtError desapareceu, mas ainda preciso me moversource código do escopo onClick to Clipboard.

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

questionAnswers(2)

yourAnswerToTheQuestion