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>)
at HTMLDivElement.<anonymous> (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->id }}"
class="gallery_product filter {{ $product->idcategory }} category{{$category->id}}"
style="border: 2px solid #D2CFCF; border-radius: 5px; <?= !empty($product->specialprice)
? "background-color:#e7e26a;" : "background-color:#ffffff;" ?> 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;">
<img data-full="{{$product}}" data-category="{{$category->name}}"
id="prod{{ $product->id }}"
@if(strpos($product->image,'https://')!== false)
src="{{$product->image }}"
@else
src="{{'/support/pictures/products/'.$product->image }}"
@endif
class="img-responsive addprod"
data-id="{{ $product->id }}" data-price="{{ $product->saleprice }}"
data-tax="{{$product->ValorImpuesto->value}}"
data-name="{{ strtoupper($product->name) }}"
data-code="{{ $product->barcode }}">
<div style="height: 30px; position: relative;">
<div style="font-weight:bold; font-size: smaller; color:#6A6A6A; text-align: justify; height: 80%; line-height:103%"
class="perfectScrollbarContainer">
{{ ucfirst(strtolower($product->name)) }}</div>
</div>
<div style="font-weight:bold; font-size: large; text-align: right;<?= !empty($product->specialprice) ? "color:#e76a6a" : "color:#585858" ?> ">
$<?= empty($product->specialprice) ? $product->saleprice : $product->specialprice ?>
</div>
</div>
Este es el código que cambié donde puse la clase addprod en el div superior
<div class="addprod" id="divprod{{ $product->id }}"
class="gallery_product filter {{ $product->idcategory }} category{{$category->id}}"
style="border: 2px solid #D2CFCF; border-radius: 5px; <?= !empty($product->specialprice)
? "background-color:#e7e26a;" : "background-color:#ffffff;" ?> 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;">
<img data-full="{{$product}}" data-category="{{$category->name}}"
id="prod{{ $product->id }}"
@if(strpos($product->image,'https://')!== false)
src="{{$product->image }}"
@else
src="{{'/support/pictures/products/'.$product->image }}"
@endif
class="img-responsive"
data-id="{{ $product->id }}" data-price="{{ $product->saleprice }}"
data-tax="{{$product->ValorImpuesto->value}}"
data-name="{{ strtoupper($product->name) }}"
data-code="{{ $product->barcode }}">
<div style="height: 30px; position: relative;">
<div style="font-weight:bold; font-size: smaller; color:#6A6A6A; text-align: justify; height: 80%; line-height:103%"
class="perfectScrollbarContainer">
{{ ucfirst(strtolower($product->name)) }}</div>
</div>
<div style="font-weight:bold; font-size: large; text-align: right;<?= !empty($product->specialprice) ? "color:#e76a6a" : "color:#585858" ?> ">
$<?= empty($product->specialprice) ? $product->saleprice : $product->specialprice ?>
</div>
</div>
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');
}
}
});