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(), just bind the 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 class 是最好的方法。

JQuery：从多个具有相同名称的 ID 获取按键上的 jquery val

JQuery: Get jquery val on keypress from multiple ids with the same name

javascript

php

foreach

jquery

keypress