Wie kann ich jeder Schaltfläche ein Ereignis-Listener für ein Tabellenzeilenergebnis hinzufügen?

Question

In meiner Rails-App lade ich eine Tabelle aus einer @ results-Variablen, so dass jede Tabellenzeile ein @ result ist. Für jede @result-Tabellenzeile suche ich Schaltflächen, die mit diesem @Ergebnis verknüpft sind. Ich versuche, einen javascript eventlistener für jede Schaltfläche zu verwenden und dann auf das Ereignis in der js.erb-Datei zu überwachen

Beim Ausführen der App sieht es aus wie nur die erste Zeile der Schaltfläche hat den Ereignis-Listener, wie kann ich repariere das?

Wie könnte ich auch mein @result an mein Javascript weitergeben, damit ich Teile dieses Objekts nutzen kann?

Ich versuche dies durch Javascript zu tun, wie ich etwas kopieren möchte die Zwischenablage um und eine Datei auf die

js.erb

var copyTextareaBtn = document.querySelector('.button1'); 

copyTextareaBtn.addEventListener('click', function(event) { 

# work with the @result that was clicked over here 
}); 

html.erb

Computer speichern

<% @results.each { |result| %> 
    <tr> 
     <td><%= result[:id] %></td> 
     <td> 
     <button class="button1"> B1 </button> 
     <button class="button2"> B2 </button> 
     <button class="button3"> B3 </button> 
     </td> 
    </tr> 

    <% } %> 

Answer 1

Sie können jedem Element tatsächlich einen Ereignis-Listener hinzufügen. Das Problem ist document.querySelector wird das erste erste übereinstimmende Element zurückgeben. Um alle von ihnen zu erhalten, würden Sie document.querySelectorAll verwenden. Wir könnten umschreiben sie JavaScript zu:

var btns = document.querySelectorAll('.button1'); 

Array.prototype.forEach.call(btns, function addClickListener(btn) { 
    btn.addEventListener('click', function(event) { 
    // code here to handle click 
    }); 
}); 

Beachten Sie, dass querySelectorAll eine NodeList gibt, die wie ein Array ist aber leider kein Array. So hat es nicht forEach und ähnliche Methoden auf der Array Klasse gefunden. So die oben genannten Arbeiten um über die Knoten mit forEach von Array.prototype zu iterieren.

Ein viel besserer Ansatz besteht jedoch darin, nach Ereignissen im übergeordneten Element oder Container für Ihr Formular oder auf Dokumentebene zu suchen. Ereignisse werden eingeblendet, sodass Sie das Klickereignis einmal anhören und nur auf den Typ filtern können, auf den Sie antworten möchten. Das wäre ein Ereignis-Listener anstelle von N (wobei N die Anzahl der Schaltflächen ist).

Answer 2

Das Problem ist, dass Sie die Zahlen jedes className wie button1 erhöht, button2 und in JavaScript nur Klasse button1 aufgerufen, um alle button1 ‚s Sie button1 in HTML zu jedem Ihrer Tasten geben Klasse anrufen müssen.

EDIT: Versuchen Sie den Code unten dann.

var button1 = document.getElementsByClassName("button1"); 
Object.keys(button1).map(function (key) { 
    var button = button1[key] 
    button.addEventListener("click", function(){ 
     alert("button1") 
    }); 
});