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.

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

Antworten auf die Frage(4)

Ihre Antwort auf die Frage