Javascript jqueryonclick函数在整个div上工作，而不仅仅是在按钮上

我正在开发通用购物车，在主页中，我有几个项目，底部有一个按钮，如果用户单击“添加到购物车”按钮，值将通过jquery存储在购物车中，但问题是，如果用户单击图像，它也会将产品数据存储在购物车中，我只希望添加到购物车按钮起作用，但当用户点击图像它还将值存储在购物车中我如何仅使用按钮附加点击事件我已尝试使用trigger（）函数，但无法达到我的目标请帮助我。 这是我的html

<div class="col-md-9" >

        <?php if(isset($products))
        {

            foreach($products as $row)
            {
            ?>
        <div class="row" >
            <div class="col-md-4" >
                <div class="product cartoon">
                    <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>
                    <p class="price" data-value="<?=$row->pprice?>">price : <?=$row->pprice?></p>
                    <input type="hidden" class="pid" value="<?=$row->pid;?>">
                    <input type="hidden" class="subcid" value="<?=$row->sub_c_id;?>">

                    <input type="hidden" class="pquan" value="<?=$row->pquantity;?>">
                    <input type="hidden" class="size"  value="<?=$row->size;?>">
                    <input type="hidden" class="color" value="<?=$row->color;?>">
                    <button class="addtocart">Add to cart</button>
                    </div>
                </div>
            </div>  
            <?php 
            }
            } 
            ?>

        </div>

只需更正您拥有的选择器，并更新您正在查找的某些元素的路径即可：

$(document).on('click',"button.addtocart",function(){
    var $btn = $(this);
    var $cartoon =  $(this).closest(".cartoon");
    var pic = $cartoon.find(".imgslct").attr('src');
    var imgdata = $cartoon.find(".pname").text();
    /* and so on */
});

另一个工作流是获取
事件。目标值：

$(document).on('click',".cartoon",function(e){
    if (!$(e.target).hasClass("addtocart")) { return; }
    /* ... */
});

但是第一个更好，因为您没有捕捉到
.cartoon
div上的所有单击。
只需更正您拥有的选择器，并更新您在那里查找的某些元素的路径：

$(document).on('click',"button.addtocart",function(){
    var $btn = $(this);
    var $cartoon =  $(this).closest(".cartoon");
    var pic = $cartoon.find(".imgslct").attr('src');
    var imgdata = $cartoon.find(".pname").text();
    /* and so on */
});

另一个工作流是获取
事件。目标值：

$(document).on('click',".cartoon",function(e){
    if (!$(e.target).hasClass("addtocart")) { return; }
    /* ... */
});

但是第一个更好，因为你没有抓住
.cartoon
div上的所有点击