Wie kopiere ich mit clipboard.js mit dynamischen Inhalten und Triggern?
Nach einem Klick auf.fw-code-copy-button
Ich möchte den Quellcode aus dem nächstgelegenen Container kopieren..fw-code-copy-button
-s werden dynamisch erstellt, nachdem der Benutzer auf die entsprechende Schaltfläche "Quelltext anzeigen" geklickt hat.
Html zum Beispiel button:
<span class="fw-code-copy">
<span class="fw-code-copy-button" data-clipboard-text="...">copy</span>
</span>
So löse ich ein Klickereignis aus und definiere den Quellcode, der in die Zwischenablage kopiert werden soll:
$(document).on("click", ".fw-code-copy-button", function(){
var source = $(this).closest(".fw-code-copy").next("code").text();
});
Und so geht's clipboard.js Löst das Kopierereignis aus
new Clipboard(".fw-code-copy-button", {
text: function(trigger) {
return source; // source should somehow be copied from scope above it
}
});
Wenn ich auf eine beliebige Stelle auf der Website klicke, wird der folgende Fehler angezeigt:
Uncaught Error: Missing required attributes, use either "target" or "text"
Aber zuerst möchte ich keinen Text definieren, der in @ kopiert werden soldata-clipboard-text="..."
und zweitensdata-clipboard-text
ist definiert mit"..."
wie es Wert ist.
Wenn jemand eine Sekunde bezahlen würde, wäre ich sehr dankbar.
[bearbeiten Ich habe jsFiddle zur Demonstration geschrieben und überraschenderweise ist UncaughtError verschwunden, aber ich muss mich noch bewegensource
code from onClick to Clipboard scope.