Почему isnt js / jquery Events работает в PHP foreach

Question

Я понимаю foreach, но для меня это ново, потому что в foreach в PHP у меня есть некоторый скрипт для каждого элемента, который обнаруживает и задается вопросом, почему он работает только для элемента в первом элементе

В кодеЯ получаю изображение из базы данных MYSQL.вместо того, чтобы использовать onclick в js, я больше изучаю jquery, и только когда я нажимаю на первое изображение, он генерирует путь
$("#main").load("includes/product.php");
и изменения, которые я хочу изменить, но в названии продукта и кнопке корзины сделатьне изменять визуальные элементы.

<section id="new-products" class="clearfix">
  <div class="title-block">
    <h4>New Products</h4>
  </div>
  <?PHP 
    foreach ($item as $items){
  ?>        
  <div class="left-col-block">
    <article class="product-box clearfix">   
    <a href="#store/category/<?PHP echo $items['category'];?>/<?PHP echo $items['brand'];?>/<?PHP echo $items['name'];?>" id="product-link">
      <img src="<?PHP echo $items['image']; ?>" alt="Card Games" title="Card Games" height="80" width="80">
    </a>
    <a href="#store/category/<?PHP echo $items['category'];?>/<?PHP echo $items['brand'];?>/<?PHP echo $items['name'];?>" id="product-link"><?PHP echo $items['name']; ?></a><br>
    <span class="price">$<?php echo $items['price'];?></span>
    <a href="#store/category/<?PHP echo $items['category'];?>/<?PHP echo $    ['brand'];?>/<?PHP echo $items['name'];?>" id="product-link" class="button tiny right icon-basket"></a>
   </article>
  `<script>
     $( "#product-link" ).click(function() {

     $("#main").load("includes/product.php");
     });
   </script>
 </div> 
 <div class="left-col-block">
 </div>
 <?PHP
 }
 ?>
</section>

Ожидается: я хочу, чтобы каждая ссылка с идентификатором product-link давала триггер события с jquery для каждого продукта и каждого идентификатора

Фактические результаты:$("#main").load("includes/product.php"); работает только с первым идентификатором, равным ссылке на продукт

Answer 1

Нашел ответ:
<script>$( ".product-box a" ).click(function() { $("#main").load("includes/product.php"); });</script>
, поскольку product-bot был классом, и я не знал, что # заставляет его проверять id и.делает поиск класса и класс может вызываться несколько раз, тогда как идентификатор должен быть уникальным

Answer 2

из-за того, что у вас есть 3 лайка для каждого элемента, и вы хотите установить клик для каждой 3 ссылки, вы должны использовать атрибут класса и установить его уникальным для каждого элемента.

Я изменил ваш код следующим образом:

<section id="new-products" class="clearfix">
    <div class="title-block">
        <h4>New Products</h4>
    </div>
    <?PHP
    foreach ($item as $key=>$items){
        ?>
        <div class="left-col-block">
            <article class="product-box clearfix">
                <a href="#store/category/<?PHP echo $items['category'];?>/<?PHP echo $items['brand'];?>/<?PHP echo $items['name'];?>" class="product-link-<?=$key?>">
                    <img src="<?PHP echo $items['image']; ?>" alt="Card Games" title="Card Games" height="80" width="80">
                </a>
                <a href="#store/category/<?PHP echo $items['category'];?>/<?PHP echo $items['brand'];?>/<?PHP echo $items['name'];?>" class="product-link-<?=$key?>"><?PHP echo $items['name']; ?></a><br>
                <span class="price">$<?php echo $items['price'];?></span>
                <a href="#store/category/<?PHP echo $items['category'];?>/<?PHP echo $items['brand'];?>/<?PHP echo $items['name'];?>" class="button tiny right icon-basket product-link-<?=$key?>"></a>
            </article>
            `<script>
                $( ".product-link-<?=$key?>" ).click(function() {

                    $("#main").load("includes/product.php");
                });
            </script>
        </div>
        <div class="left-col-block">
        </div>
        <?PHP
    }
    ?>
</section>