jQuery：从具有相同名称的多个ID上获取按键上的jQuery Val

Question

希望任何人都可以帮忙。 我有一个运行中的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');
                });
 });

结果：它完美地适用于从数据库中提取的第一条记录（第一篇文章）。 在第二篇文章及以后的版本中，JavaScript根本不会触发。 我理解问题是因为jQuery仅读取第一个div。 我在网上检查了一些解决方案，但对我没有任何帮助。 最合乎逻辑的解决方案似乎是将.each放入函数中。 但是结果是一样的。 前几篇文章完美地触发了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");
      }
   });
});

我们不能使用相同的ID，可以使用name或class。使用class是最好的方法。