JQuery: Bekommen jquery val auf Tastendruck von mehreren IDs mit dem gleichen Namen

Question

Hoffe, dass jemand mit diesem helfen kann. ich ein PHP foreach läuft, wo ich mehrere acticles aus der Datenbank erhalten:

@foreach ($articles as $article) 
    <div class="article">  
     <input id="comment" type="text" class="materialize-textarea" placeholder="Add comment"/> 
    </div> 
@endforeach 

Sagen wir, ich habe 2 oder mehr Artikel in der Datenbank. Also auf der HTML-Seite wird das Div dupliziert und ich habe mehrere Divs mit der gleichen ID.

Als nächstes möchte ich jquery den Eingabewert erhalten. Hier ist der Beispielcode

$("#comment").each(function() 
{ 
      $(this).keypress(function(e) 
       {if (e.which == 13) 
        alert('works'); 
       }); 
}); 

Das Ergebnis: Es funktioniert perfekt auf den ersten Datensatz aus der Datenbank gezogen (erster Artikel). Auf dem zweiten Artikel und darüber hinaus wird das JavaScript überhaupt nicht ausgelöst. Ich verstehe das Problem, weil jQuery das erste Div nur liest. Ich überprüfe einige Lösungen online, aber nichts hat wirklich für mich funktioniert. Die logischste Lösung schien es zu sein, die Funktion zu setzen. Aber das Ergebnis ist das Gleiche. Der erste Artikel löst JavaScript perfekt aus, der Rest nicht.

Hinweise: Wenn der PHP-Code merkwürdig aussieht, ignorieren Sie ihn bitte, er befindet sich auf Laravel-Framework. Trotzdem wird es korrekt ausgeführt. Der hier vorgestellte Code zeigt nur die Logik der Anwendung und ist nicht der eigentliche Code.

Answer 1

Das Attribut id sollte eindeutig sein, da es zur eindeutigen Identifizierung eines Elements verwendet wird. Der id Selektor wählt nur das erste Element mit der id aus, verwenden Sie stattdessen class als Elementgruppe.

@foreach ($articles as $article) 
    <div class="article">   
     <input class="comment" type="text" class="materialize-textarea" placeholder="Add comment"/> 
     <!-------^---- set class instead of `id` ---------------------------------------------------> 
    </div> 
@endforeach 

Dann gibt es keine Notwendigkeit, über ihnen zu wechseln mit each(), nur den Handler keypress() Ereignis binden direkt an die Wähler.

$(".comment").keypress(function(e){ 
//-^-------- class selector 
    if (e.which == 13) 
     alert('works'); 
}); 

Answer 2

HTML:

@foreach ($articles as $article) 
    <div class="article">  
     <input id="comment" type="text" class="materialize-textarea commentArea" placeholder="Add comment"/> 
    </div> 
@endforeach 

Javascript:

$(".commentArea").each(function(){ 
    $(this).keypress(function(e){ 
     if(e.which == 13){ 
     alert("OK"); 
     } 
    }); 
}); 

Wir nicht gleichen IDs.Can Verwendung Namen oder class.Using Klasse verwenden können, ist der beste Weg.