onclick事件僅適用於第一個產品，不適用於其他提取的數據

Question

我在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> 

Answer 1

ID應該是唯一的。

在將ID更改為類（ #con > .con ）並適當修改代碼后，它們將全部被選中。

參見以下示例： http : //jsfiddle.net/shomz/38PB2/

Answer 2

您處於一個循環中，該循環反復使用相同的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";

Answer 3

首先將要附加到類的事件更改為非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事件也將附加到新元素上