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 - ＆gt; .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

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

更改

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

到

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

你在div中也有链接标记会产生一些问题，直到停止传播该事件

然后将click事件添加到您可以使用的已获取元素

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

所以点击事件也将附加到新元素

onclick事件仅适用于第一个产品，它不适用于其他获取的数据

3 个答案: