Почему работает только первый id(ajax)?

Question

[l55uiz]

Не могу понять, почему у меня работает добавление товара с первым(1) id в корзину без перехода по ссылке, а со всеми следующими товарами только переход по ссылке?(однако добавление также работает)
Я кликаю по записи с ID 1 - получаю ответ на текущей странице index.php, без перехода на cart.php. Ответ такой -
Кликаю по записи с ID 2 и дальше - перехожу на страницу - хотя при клике по записи с ID 1 - я остаюсь на index.php. Почему так?
Следующий код:
В index.php вывожу товары:

<?php foreach ($menu->getItems() as $items_list) : ?>
       //тут вывожу, то что мне надо. Всякие блоки с инфой и т.д
        <a  href='cart.php?addToCart=<?=$items_list['id']?>' id="add-to-cart" data-id="<?=$items_list['id']?>" >В корзину</a>
        <?php endforeach; ?>

В JS пишу такой код. В блок count вывожу количество:

$(function () {
  $("#add-to-cart").on('click', function() {
      var id = $(this).attr('data-id');
      $.ajax({
        url: 'cart.php?addToCart='+id,
        type: 'GET',
        success:function (data) { 
        $('.count').append(data);
      }
      })
      return false;
    });
});

Comments

[archelon]

Вы никогда не слышали о том, что id элемента должен быть уникальным?

[l55uiz]

archelon: про уникальность я слышал, однако затупил с тем, что я думал, что вытягиваю data-id. А он в свою очередь уникален...

Answer 1

[Camaro67]

Потому, что id в пределах страницы должен быть уникальным, а у вас он повторяется для каждой ссылки: id="add-to-cart". Поэтому берется первый попавшийся элемент с таким id.

Comments

[l55uiz]

Так id="add-to-cart" мне нужен для нахождения кнопки "Добавить в корзину", а ID я вытягиваю через data-id

[Денис Букреев]

l55uiz: мало ли что нужно.
пишут же "должен быть уникальным", к чему начинать спорить? все равно этого не изменить, и это вполне логичное поведение.

[Camaro67]

l55uiz: Вы понимаете что он должен быть УНИКАЛЬНЫМ на всю страницу?) Читайте хоть иногда документацию. Значит замените его на что-то другое, например, на класс add-to-cart.

Или если любите извращения, тогда можете делать что-то типа этого id="add-to-cart-<?=$items_list['id']?>" и находить так $('[id^="add-to-cart"]').on(

Или убрать id и находить так $('[data-id]').on(

ИМХО, я бы использовал лучше класс. Привык так уже из-за БЭМ.

[l55uiz]

Денис Букреев: да, затупил. Но я хотел вытаскивать уникальный ID с атрибута data-id

[Camaro67]

l55uiz: А что мешает использовать класс в качестве селектора и вытаскивать этот самый data-id?

[l55uiz]

Camaro67: я прекрасно понимаю, что уникальный должен быть. Документация не надо, спасибо. Однако я затупил в том, что я думал, что вытягиваю data-id у тега а. Однако спасибо.

[Nik Gubin]

l55uiz: вы путаете идентификатор DOM-элемента и идентификатор вашего товара. У DOM-элемента (тега) есть атрибут "id" - он должен быть уникальный на всю страницу, как писали вам выше. А идентификатор вашего товара это уже дело не DOM и ему плевать, где вы будете его хранить. Атрибут id на странице должен быть уникальный, это азы вёрстки...

Answer 2

[trushka]

атрибут id должен быть уникальным для каждого элемента на странице, по этому лучше класс использовать или вообще дата-аттрибут. Но он тут не нужен - всё есть в href.

<a  href='cart.php?addToCart=<?=$items_list['id']?>' class="add-to-cart" >В корзину</a>

$("a.add-to-cart").on('click', function() {
  $('.count').load(this.href)
}

Но если будет динамическая подгрузка новых товаров без перезагрузки (при прокрутке к низу или применении фильтра), то лучше обработчик не на сами ссылки вешать, а на родительский блок

$('.content').on('click', 'a.add-to-cart', function() {...}

Или вообще просто вынести в скрипте в отдельную функцию и прописать её в onclick на сервере.

Comments

[l55uiz]

спасибо за помощь. Я очень глупо ступил)