JQuery：从具有相同名称的多个id获取keypress上的jquery val

Hope anybody can help with this. I have a php foreach running, where I get multiple acticles from the database:

希望有人可以帮忙解决这个问题。我有一个php foreach运行,我从数据库中获取多个acticles:

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

Let's say i have 2 or more articles in the database. So on the html side the div gets duplicated and i have multiple divs with the same id.

假设我在数据库中有2篇或更多文章。所以在HTML方面,div得到重复,我有多个具有相同id的div。

Next i want jquery to get the input value. Here's the sample code

接下来我想要jquery来获取输入值。这是示例代码

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

The result: it works perfectly on the first record pulled from database(first article). on the second article and onward the JavaScript doesn't trigger at all. I understand the problem it's because jQuery reads the first div only. I check some solutions online, but nothing really worked for me. The most logical solution seemed to be putting .each in the function. But the result is the same. The first articles triggers JavaScript perfectly, the rest don't.

结果:它完全适用于从数据库中提取的第一条记录(第一篇文章)。在第二篇文章上,JavaScript根本没有触发。我理解它的问题是因为jQuery只读取第一个div。我在网上查了一些解决方案,但没有什么对我有用。最合乎逻辑的解决方案似乎是将.each放在函数中。但结果是一样的。第一篇文章完美地触发了JavaScript,其余的则没有。

Notes: If the php code looks strange please ignore it, it's on laravel framework. Nonetheless, it executes correctly. The code presented here only shows the logic of the application and is not the actual code.

注意:如果php代码看起来很奇怪,请忽略它,它在laravel框架上。尽管如此,它正确执行。此处提供的代码仅显示应用程序的逻辑,而不是实际代码。

2 个解决方案

#1

The id attribute should be unique, since it's using for uniquely identifying an element. The id selector only selects the first element which have the id, so use class instead for group of elements.

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

Then there is no need to iterate over them using each(), just bind the keypress() event handler directly to the selector.

然后不需要使用each()迭代它们,只需将keypress()事件处理程序直接绑定到选择器。

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

#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");
      }
   });
});

We can't use same IDs.Can use name or class.Using class is the best way.

我们不能使用相同的ID。可以使用名称或类。使用类是最好的方法。

#1