Javascript onclick事件只对它不支持的第一个产品有效'；无法处理其他提取的数据

我在codeigniter中开发购物车，在那里我从数据库中获取数据，当用户单击“添加到购物车”时，与当前项目相关的数据会被用户单击“获取存储在jQuery变量中”，现在我面临的问题是，onclick事件只对第一个获取的项目有效，而对其他项目无效，我弄不明白为什么它会起作用不工作。 这是我的密码

<div class="col-md-9" >
        <?php if(isset($products))
        {
            foreach($products as $row)
            {
            ?>
        <div class="row" >
            <div class="col-md-4" id="con">
                <div class="product">
                    <a href="products/<?=$row->sub_c_id?>/<?=$row->pid?>">
                    <img  id="imgslct" alt="<?=$row->pname?>" height="173" width="144" src="<?php echo base_url(); ?>uploads/<?=$row->product_pic?>">                                       
                    </a>
                    <div class="name">
                    <a href="#" id="pname"><?=$row->pname?></a>
                    </div>
                    <div class="price">
                    <p id="price">price : <?=$row->pprice?></p>
                    <input type="hidden" id="pquan" value="<?=$row->pquantity;?>">
                    <button id="addtocart" class="btn btn-lg btn-default">Add to cart</button>
                    </div>
                </div>
            </div>  
            <?php 
            }
            } ?>

价格：
ID应该是唯一的

当您将id更改为类（
#con
->
.con
）并适当修改代码时，它们都将被选中

请参见此示例：
ID应该是唯一的

当您将id更改为类（
#con
->
.con
）并适当修改代码时，它们都将被选中

请参见此示例：
您处于一个循环中，该循环反复使用相同的
id
，而
id=“con”
是第一个循环。由于id在DOM中必须是唯一的，因此需要将其从id更改为类

你应该这样做：

<div class="col-md-4 con">
    <div class="product">
        <a href="products/<?=$row->sub_c_id?>/<?=$row->pid?>">
            <img class="imgslct" alt="<?=$row->pname?>" height="173" width="144" src="<?php echo base_url(); ?>uploads/<?=$row->product_pic?>">                                       
        </a>
        <div class="name">
            <a href="#" class="pname"><?=$row->pname?></a>
        </div>
        <div class="price">
            <p>price : <?=$row->pprice?></p>
            <input type="hidden" class="pquan" value="<?=$row->pquantity;?>">
            <button class="addtocart btn btn-lg btn-default">Add to cart</button>
        </div>
    </div>
</div>  


价格：

您处于一个循环中，该循环反复使用相同的
id
，而
id=“con”
是第一个循环。由于id在DOM中必须是唯一的，因此需要将其从id更改为类

你应该这样做：

<div class="col-md-4 con">
    <div class="product">
        <a href="products/<?=$row->sub_c_id?>/<?=$row->pid?>">
            <img class="imgslct" alt="<?=$row->pname?>" height="173" width="144" src="<?php echo base_url(); ?>uploads/<?=$row->product_pic?>">                                       
        </a>
        <div class="name">
            <a href="#" class="pname"><?=$row->pname?></a>
        </div>
        <div class="price">
            <p>price : <?=$row->pprice?></p>
            <input type="hidden" class="pquan" value="<?=$row->pquantity;?>">
            <button class="addtocart btn btn-lg btn-default">Add to cart</button>
        </div>
    </div>
</div>  


价格：

首先将要附加到类的事件更改为非id，因为id必须是唯一的，如果将click事件附加到id，则只有具有该id的第一个元素才会触发该事件

改变

 <div class="col-md-4" id="con">

因此，click event也将附加到新元素
首先更改要附加到类的事件而不是id，因为id必须是唯一的，如果将click event附加到id，则只有具有该id的第一个元素才会触发该事件

改变

 <div class="col-md-4" id="con">

因此，单击事件也将附加到新元素上
它不起作用，而且第一个起作用的项目已停止工作是的，这就是为什么我说
，并适当地修改代码
。你可能在什么地方没换。如果你愿意，你可以在这里粘贴你的新代码。现在它开始工作了，但现在我面临另一个问题，我点击了每一个产品，它添加了第一个产品的数据。非常感谢shomz的这一善举，但我会尝试从一开始就用正确的方式重写整个脚本，它肯定会工作，但你已经澄清了我的概念我接受你的回答太好了，我很高兴能帮上忙！因此，当有唯一项时，使用ID，当有许多项时，使用类。它不起作用，而且第一个起作用的项已停止工作是的，这就是为什么我说
，并适当地修改代码。你可能在什么地方没换。如果你愿意，你可以在这里粘贴你的新代码。现在它开始工作了，但现在我面临另一个问题，我点击了每一个产品，它添加了第一个产品的数据。非常感谢shomz的这一善举，但我会尝试从一开始就用正确的方式重写整个脚本，它肯定会工作，但你已经澄清了我的概念我接受你的回答太好了，我很高兴能帮上忙！因此，当有唯一项时，使用ID，当有许多项时，使用类。在jQuery中查看委派事件，因为您正在动态添加元素。@RobSchmuecker似乎不是这样-他使用PHP渲染所有行，但每行都有重复的ID。@Shomz是的，我明白了，您的所有答案都突出了这一点。但如果他想将事件附加到他正在添加的
remove
元素上。请在jQuery中查看委派事件，因为您正在动态添加元素。@RobSchmuecker似乎不是这样-他使用PHP渲染所有行，但每行都有重复的ID。@Shomz是的，我明白了，您的所有答案都突出了这一点。但是万一他想将事件附加到他正在添加的
删除
元素上。@Vicky-你还有其他id需要在循环中更改。在该循环中不能有任何静态id。将它们全部更改为类。@Vicky-Yup，
pname
，
pquan
，
pid
，
price
，
addtocart
。它们都需要从
id
更改为
class
，除非您可以使它们唯一。为什么您使用多个类属性，它将不起作用使用您非常受欢迎，这是一个错误，谢谢alot@Vicky-您有其他需要在循环中更改的id。在该循环中不能有任何静态id。将它们全部更改为类。@Vicky-Yup，
pname
，
pquan
，
pid
，
price
，
addtocart
。它们都需要从
id
更改为
class
，除非您可以使它们唯一。为什么您使用多个类属性，它将不起作用使用您非常受欢迎，这是一个错误，非常感谢
 <div class="col-md-4 con" >

  $(document).on('click','.con',function(){
  /// your code
  });