JQuery：同じ名前の複数のIDからkeypressでjquery valを取得する

Question

誰でもこれを手伝ってくれることを願っています。 私は、データベースから複数のacticlesを取得するPHPのforeachランニング、持っている：

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

をさんは、私は、データベースに2件の以上の記事があるとしましょう。だから、HTML側では、divは重複して、私は同じIDを持つ複数のdivを持っています。

次に、jqueryで入力値を取得します。サンプルコードは次のとおりです

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

結果：データベースから取得した最初のレコード（最初の記事）で完全に機能します。 2番目の記事以降では、JavaScriptはまったくトリガーしません。 jQueryが最初のdivのみを読み込むため、問題があると認識しています。私はいくつかのソリューションをオンラインでチェックしますが、実際には私のためには何も働かなかった最も論理的な解決策は、各機能を各機能に組み込んでいるようです。しかし結果は同じです。最初の記事はJavaScriptを完全に起動し、残りの部分はJavaScriptを起動しません。

注：PHPコードが奇妙に見える場合は無視してください。これはlaravelフレームワーク上にあります。それにもかかわらず、正しく実行されます。 ここに示すコードは、アプリケーションのロジックのみを示しており、実際のコードではありません。

Answer 1

id属性は、要素を一意に識別するために使用するため、一意である必要があります。 idセレクタは、idを持つ最初の要素のみを選択するため、要素のグループの代わりにclassを使用します。

@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 

はその後each()は、単にセレクタに直接keypress()イベントハンドラをバインド使用してそれらを反復する必要はありません。

$(".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"); 
     } 
    }); 
}); 

私たちは、同じIDs.Can使用の名前を使用することはできませんかclass.Usingクラスが最良の方法です。