Javascript — JQuery: получить JQuery Val при нажатии клавиш из нескольких идентификаторов с тем же именем

Question

Javascript — JQuery: получить JQuery Val при нажатии клавиш из нескольких идентификаторов с тем же именем

Надеюсь, что кто-нибудь может помочь с этим.
У меня работает 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 дублируется, и у меня есть несколько div с одним и тем же идентификатором.

Далее я хочу, чтобы JQuery получить входное значение. Вот пример кода

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

Результат: он отлично работает с первой записью, извлеченной из базы данных (первая статья). во второй статье и далее JavaScript не срабатывает вообще.
Я понимаю проблему, потому что jQuery читает только первый div. Я проверяю некоторые решения онлайн, но у меня ничего не получалось. Наиболее логичное решение, похоже, заключалось в использовании функции .each. Но результат тот же. Первые статьи отлично запускают JavaScript, остальные нет.

Примечания: если код php выглядит странно, пожалуйста, игнорируйте его, он работает на платформе laravel. Тем не менее, он выполняется правильно.
Код, представленный здесь, показывает только логику приложения и не является реальным кодом.

0

foreach javascript jquery keypress php

Решение

Другие решения

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

Мы не можем использовать одинаковые идентификаторы. Можно использовать имя или класс. Использование класса — лучший способ.

0

Источник

Accepted Answer

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');
});

0