jquery onclick function work on whole div not only on button

Question

I am developing general purpose shopping cart where in main page I have several items and a button at bottom if the user clicks on Add to cart button the values get stored in shopping cart via jquery but the problem is that if user clicks on the image it also get stored the product data in cart I want that only add to cart button work but when user click on image its also storing the values in cart how can i attach the click event only with button I have tried trigger() function but couldn't reach to my goal please help me out. here is my 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>

Here is my jquery script.

<script type="text/javascript">
    $(document).ready(function() {
    var counter=1;
       $(document).on('click',".cartoon",function(){

           var pic=$(this).find(".imgslct").attr('src');
           alert (pic);
           var imgdata= $(this).find(".pname").text();
           var productquantity= $(this).find('.pquan').val(); 
           var color= $(this).find(".color").val();
           var size= $(this).find('.size').val(); 
           var productid=$(this).find('.subcid').val(); 
           var price=$(this).find(".price").attr('data-value'); 
           var qty="1";
           var session_id="<?=$this->session->userdata('session_id');?>";
           var pid=$(".pid").val();


           $.ajax({
               type:"post",
               url:"<?=base_url();?>check_upload",
               data:"session_id="+session_id+"&imgdata="+imgdata,
               success: function(data)
              {
                var check=data;
                var check1=$.trim(check);
                $(".core").val(check1);
                alert(check1);
                if(check1==1)
                {
                    alert("Product already added");
                }
                else
                {
                    //start block of adding cart values 
                     var cn=$("#co").val();
                     var cnc=counter++;
                     var total=parseInt(cn)+parseInt(cnc);
                     $("#counter").text(total);
                     //end block of adding cart values

                      $.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+"&color="+color+"&size="+size,
        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">'+imgdata+'</a></td><td class="quantity">x&nbsp;3</td><td class="total" data-value="'+price+'">'+price+'</td><td class="remove"><img src='+pic+' alt="Remove" title="Remove"></td></tr>');

            //totaling the price of products
    var intial=$("#totaling").attr('data-value');
    var t=$(".total").attr('data-value');
    var totaling=parseInt(intial)+parseInt(t);
    $("#totaling").attr('data-value',totaling);
    $("#totaling").text(totaling);
   // end of totaling   

    //start of sub-totaling the price
    var s_intial=$("#sub-total").attr('data-value');
    var s_t=$(".total").attr('data-value');
    var s_totaling=parseInt(intial)+parseInt(t);
    $("#sub-total").attr('data-value',s_totaling);
    $("#sub-total").text(s_totaling);
    //end of sub-totaling the price

                }

              }
           });

<!-- for inspecting the item is added or not -->          
 //$("#myElem").show().delay(5000).fadeOut();
           });

    });

</script>

Answer 1

Just correct the selector you have and update the paths to some elements your are find ing there:

$(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 */
});

Another workflow is to get the event.target value:

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

But the first one is better since you don't catch all clicks on .cartoon div.