Title: Clase en un div que contiene varios elementos presenta error
Tags: javascript;array;div;class
Question: tengo un div que contiene otros div y adentro una imagen que se arma con arreglo, en la imagen actualmente tengo una clase para agregar a un panel cuando se le da click, eso funciona bien, pero quiero que esa función no esté en la imagen si no en el div principal, para que cuando le hagan click en cualquier parte del div ejecute la clase de agregar al panel.

Cuando hago el cambio de la clase al div superior sale un error en el navegador 

```Uncaught SyntaxError: Unexpected token u in JSON at position 0
    at JSON.parse (<anonymous&gt;)
    at HTMLDivElement.<anonymous&gt; (pdvi:2885)
    at HTMLDivElement.dispatch (jquery.min.js:3)
    at HTMLDivElement.r.handle (jquery.min.js:3)
```

Esta es la imagen, actualmente la clase de addprod se ejecuta cuando le dan click en el área marcada de azul, quiero que se ejecute cuando le dan click en cualquier parte del cuadro, incluido el texto y los números de abajo.



Este es el código que me está funcionando bien, a la mitad está la clase addprod que quiero cambiar a la parte superior

```<div id="divprod{{ $product-&gt;id }}"
                                            class="gallery_product filter {{ $product-&gt;idcategory }} category{{$category-&gt;id}}"
                                            style="border: 2px solid #D2CFCF; border-radius: 5px; <?= !empty($product-&gt;specialprice)
                                                ? "background-color:#e7e26a;" : "background-color:#ffffff;" ?&gt;  display: inline-block;
                                       max-width:2.8vw; min-width:115px; min-height:160px; padding-top: 15px; padding-left: 7px; padding-right: 5px;
                                       margin: 1.03vh; margin-left: 0.6vh; margin-right: 1vh;"&gt;
                                            <img data-full="{{$product}}" data-category="{{$category-&gt;name}}"
                                                 id="prod{{ $product-&gt;id }}"
                                                 @if(strpos($product-&gt;image,'https://')!== false)
                                                 src="{{$product-&gt;image }}"
                                                 @else
                                                 src="{{'/support/pictures/products/'.$product-&gt;image }}"
                                                 @endif


                                                 class="img-responsive addprod"


                                                 data-id="{{ $product-&gt;id }}" data-price="{{ $product-&gt;saleprice }}"
                                                 data-tax="{{$product-&gt;ValorImpuesto-&gt;value}}"
                                                 data-name="{{ strtoupper($product-&gt;name) }}"
                                                 data-code="{{ $product-&gt;barcode }}"&gt;

                                            <div style="height: 30px; position: relative;"&gt;
                                                <div style="font-weight:bold; font-size: smaller; color:#6A6A6A; text-align: justify; height: 80%; line-height:103%"
                                                     class="perfectScrollbarContainer"&gt;
                                                    {{ ucfirst(strtolower($product-&gt;name)) }}</div&gt;
                                            </div&gt;

                                            <div style="font-weight:bold; font-size: large; text-align: right;<?= !empty($product-&gt;specialprice) ? "color:#e76a6a" : "color:#585858" ?&gt; "&gt;
                                                $<?= empty($product-&gt;specialprice) ? $product-&gt;saleprice : $product-&gt;specialprice ?&gt;
                                            </div&gt;


                                    </div&gt;

```

Este es el código que cambié donde puse la clase addprod en el div superior

```<div class="addprod" id="divprod{{ $product-&gt;id }}"
                                            class="gallery_product filter {{ $product-&gt;idcategory }} category{{$category-&gt;id}}"
                                            style="border: 2px solid #D2CFCF; border-radius: 5px; <?= !empty($product-&gt;specialprice)
                                                ? "background-color:#e7e26a;" : "background-color:#ffffff;" ?&gt;  display: inline-block;
                                       max-width:2.8vw; min-width:115px; min-height:160px; padding-top: 15px; padding-left: 7px; padding-right: 5px;
                                       margin: 1.03vh; margin-left: 0.6vh; margin-right: 1vh;"&gt;
                                            <img data-full="{{$product}}" data-category="{{$category-&gt;name}}"
                                                 id="prod{{ $product-&gt;id }}"
                                                 @if(strpos($product-&gt;image,'https://')!== false)
                                                 src="{{$product-&gt;image }}"
                                                 @else
                                                 src="{{'/support/pictures/products/'.$product-&gt;image }}"
                                                 @endif
                                                 class="img-responsive"
                                                 data-id="{{ $product-&gt;id }}" data-price="{{ $product-&gt;saleprice }}"
                                                 data-tax="{{$product-&gt;ValorImpuesto-&gt;value}}"
                                                 data-name="{{ strtoupper($product-&gt;name) }}"
                                                 data-code="{{ $product-&gt;barcode }}"&gt;

                                            <div style="height: 30px; position: relative;"&gt;
                                                <div style="font-weight:bold; font-size: smaller; color:#6A6A6A; text-align: justify; height: 80%; line-height:103%"
                                                     class="perfectScrollbarContainer"&gt;
                                                    {{ ucfirst(strtolower($product-&gt;name)) }}</div&gt;
                                            </div&gt;

                                            <div style="font-weight:bold; font-size: large; text-align: right;<?= !empty($product-&gt;specialprice) ? "color:#e76a6a" : "color:#585858" ?&gt; "&gt;
                                                $<?= empty($product-&gt;specialprice) ? $product-&gt;saleprice : $product-&gt;specialprice ?&gt;
                                            </div&gt;


                                    </div&gt;
```

Este es el código de javascript de la clase addprod.

``` $(".addprod").click(function () {
            id_venta = $(this).attr("data-id");
            data = JSON.parse($(this).attr("data-full"));


            if (data.categoria.typemodal == modalPhoneNumber) {
                if (canttotal == 0 || flag) {
                    contador = contador + 1;
                    $('#exampleModal').modal('show');

                    //cuando se cierra el modal
                    $("#close_modal").click(function () {
                        $("#service_number").val("");
                        $("#exampleModal").find("#confirm_number").removeClass('is-invalid')
                        $("#exampleModal").find("#alert-div").attr('hidden', true)
                        $('.modal-service').find('.span-se').text('');
                    });
                    //cuando se envia
                    $("#send_modal").click(id_venta, function (e) {
                        // $('.modal-service').find('.span-se').text('');
                        service = false;
                        sendService(id_venta);
                    });

                } else {
                    $("#modalServices").modal('show')
                    $('.btn-services').on('click', function () {
                        // flag = true;
                        cancelarfactura();
                        $("#modalServices").modal('hide')
                        setTimeout(function () {
                            $('#exampleModal').modal('show');
                            $("#send_modal").click(function () {
                                service = false;
                                sendService(id_venta)
                            });
                        }, 500);
                        flag = false;
                    })
                }
            } else {
                if (service) {
                    agregaritem($(this).attr("data-id"));

                } else {
                    $("#CancelarVenta").modal('show');
                }
            }
        });
```

Comment: Y tu código de javascript? Por lo que veo te falta llevar los atributos data al tag del div

Comment: Hola, gracias, por responder, actualicé la pregunta con el código javascript.

Here is the accepted answer: Tu problema es que olvidaste poner los data en el div

Remuevelos de img y colocalos en su contenedor

```<div class="addprod" id="divprod{{ $product-&gt;id }}"
data-full="{{$product}}"
data-id="{{ $product-&gt;id }}"
&gt;
```

Puedes usar la funciónde jQuery para sustituir

```$(this).attr("data-id")
//por
$(this).data("id")
```

Comment for this answer: Perfecto, solucionado, gracias
Comment for this answer: Te agradezco marques la respuesta como la correcta para marcar tu pregunta como resuelta


{'source': 'StackExchangeDataset', 'subset': 'es.stackoverflow.com', 'metadata': {'AnswerCount': 1, 'CommentCount': 2, 'ContentLicense': 'CC BY-SA 4.0', 'CreationDate': '2020:00:03/18/20', 'FavoriteCount': None, 'PostTypeId': 1, 'Tags': '<javascript><array><div><class>', 'Title': 'Clase en un div que contiene varios elementos presenta error', 'ViewCount': 47, 'id': 337890, 'user_AboutMe': None, 'user_AccountId': 17094000.0, 'user_DisplayName': 'CKOXKAR', 'user_Reputation': 15.0, 'user_Views': 3.0, 'user_id': 148976.0}}