Onclick事件只对第一个产品起作用，对其他获取的数据不起作用

onclick event works only on first product it doesn't work on other fetched data

本文关键字：获取 其他 数据 不起作用 事件 第一个 Onclick 起作用      更新时间：2023-09-26

我正在开发购物车在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 
            }
            } ?>

JQuery代码

<script type="text/javascript">
    $(document).ready(function() {
    var counter=0;
       $("#con").on('click',function(){
           counter++;
           var pic=$(this).find("img").attr('src');
           alert(pic);
           var imgdata= $(this).find("#pname").text();
           var productquantity= $('#pquan').val(); 
           var productid=$('#pid').text(); 
           var price=$("#price").text(); 
           var qty="1";
           var session_id="<?=$this->session->userdata('session_id');?>";
           var pid="1";
            $("#counter").text(counter);
         var counting= $("#counter").text(counter);
           <?php $counting=''?>+counting;
           alert(counting);
           <?php $new_data=array('counter' => $counting ) ?>
           if(qty=="")
           {
            alert("no quantity added");
            return false;
           }
    $.ajax({
        type:"post",
        url:"<?=base_url();?>temp_upload",
        data:"pic="+pic+"&imgdata="+imgdata+"&productquantity="+productquantity+"&productid="+productid+"&price="+price+"&qty="+qty+"&session_id="+session_id+"&pid="+pid,
        success: function(data)
        {
            alert(data);
            $("#uploaded").html();
        }
        });     

           $("#newdata").append('<tr><td class="image"><img alt="IMAGE" class="img-responsive" src="'+pic+'"></td><td class="name"><a href="project.html">Black Dress</a></td><td class="quantity">x&nbsp;3</td><td class="total">'+price+'</td><td class="remove"><img src="'+pic+'" alt="Remove" title="Remove"></td></tr>');
           });
    });
    </script>

id必须唯一

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

请看下面的例子:http://jsfiddle.net/shomz/38PB2/

您处于一个循环中，该循环一遍又一遍地使用相同的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>

然后将JavaScript的开头改为:

$(".con").on('click', function () 
{
    counter++;
    var $this = $(this);
    var pic = $this.find("img").attr('src');
    var imgdata = $this.find(".pname").text();
    var productquantity = $this.find('.pquan').val();
    var productid = $this.find('.pid').text();
    var price = $this.find(".price").text();
    var qty = "1";
    var session_id = "<?=$this->session->userdata('session_id');?>";
    var pid = "1";

首先将事件附加到class上而不是id上，因为id必须是唯一的，如果您将click事件附加到id上，则只有具有该id的第一个元素才会触发该事件

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


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

在div中还有一个link标签这会造成一些问题直到事件停止传播

则可以使用

将click事件添加到获取的元素中
  $(document).on('click','.con',function(){
  /// your code
  });

所以click event也会附加到新元素上

相关文章：