clipboardjs funktioniert nicht beim Zuweisen der Klasse mit Leerzeichen

Question

Ich habe clipboardjs erfolgreich eingerichtet. Jetzt füge ich ein Framework für Designzwecke hinzu.

Es funktioniert alles nur dann, wenn ich eine neue Klasse zu der Schaltfläche "kleine Schaltfläche" hinzufügen, als es nicht mehr funktioniert. Bevor ich einen Knopf benutze, wird es sehr gut funktionieren.

Ich denke, es gibt eine einfache Antwort, aber ich denke, ich habe das falsche Blick auf das Problem.

Dies ist nicht funktionierendes Beispiel:

<script> 
 
    var clipboard = new Clipboard('.small button'); 
 
clipboard.on('success', function(e) { 
 
    console.log(e); 
 
}); 
 
clipboard.on('error', function(e) { 
 
    console.log(e); 
 
}); < /script>

<div class="result"> 
 
    <label>E-Mail Code:</label> 
 
    <p> 
 
    <textarea id="emailcode"> 
 
     <?=$image;?> 
 
    </textarea> 
 
    </p> 
 
    <p> 
 
    <button class="small button" data-clipboard-action="copy" data-clipboard-target="#emailcode"> 
 
     Copy to clipboard 
 
    </button> 
 
    </p> 
 
    <label>Digistore24 Code:</label> 
 
    <p> 
 
    <textarea id="ds24code"> 
 
     <?=$ds24;?> 
 
    </textarea> 
 
    </p> 
 
    <p> 
 
    <button class="small button" data-clipboard-action="copy" data-clipboard-target="#ds24code"> 
 
     Copy to clipboard 
 
    </button> 
 
    </p> 
 
</div>

Dies ist das Arbeitsbeispiel:

<script> 
 
    var clipboard = new Clipboard('.btn'); 
 
clipboard.on('success', function(e) { 
 
    console.log(e); 
 
}); 
 
clipboard.on('error', function(e) { 
 
    console.log(e); 
 
}); < /script>

<div class="result"> 
 
    <label>E-Mail Code:</label> 
 
    <p> 
 
    <textarea id="emailcode"> 
 
     <?=$image;?> 
 
    </textarea> 
 
    </p> 
 
    <p> 
 
    <button class="btn" data-clipboard-action="copy" data-clipboard-target="#emailcode"> 
 
     Copy to clipboard 
 
    </button> 
 
    </p> 
 
    <label>Digistore24 Code:</label> 
 
    <p> 
 
    <textarea id="ds24code"> 
 
     <?=$ds24;?> 
 
    </textarea> 
 
    </p> 
 
    <p> 
 
    <button class="btn" data-clipboard-action="copy" data-clipboard-target="#ds24code"> 
 
     Copy to clipboard 
 
    </button> 
 
    </p> 
 
</div>

Answer 1

eine doppelte Klasse hinzufügen zu Ihrem Knopf, wie unten beschrieben. Zuerst posten Sie "btn" und dann mit einem Leerzeichen die relevante CSS aus dem Framework.

<button class="btn small button" data-clipboard-action="copy" 
data-clipboard-target="#ds24code"> 

Answer 2

Das Argument übergeben, wenn die Zwischenablage Bibliothek zu initialisieren, ein CSS-Selektor ist so der Code, den Sie haben

new Clipboard('.small button') 

button Tags innerhalb Tags von small Klasse finden. Was Sie wollen, ist wahrscheinlich

new Clipboard('.small.button') 

die Tags, das an beiden small und button Klassen finden.