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.