In the code below you are demonstrating a% clickable% in case it is mobile . When full has an icon that appears within div
when hovering the mouse, div
.
HTML
<div class="item" data-filter="{!! $prod->id_categoria !!}" data-categ="{!! $prod->slug_categoria !!}" data-slug="{!!
$prod->slug !!}">
<div class="imagem">
{!! HTML::image('img/produtos/'.$prod->imagem, $prod->produto) !!}
</div>
<div class="icons">
{!! HTML::image('img/details.png', 'Ver Produto', ['class' => 'detail']) !!}
{!! HTML::image('img/add-cart.png', 'Adicionar ao Orçamento', ['class' => 'add-cart']) !!}
</div>
<div class="nome">{!! $prod->produto !!}</div>
</div>
The code that does the click function is the one below. I've tried using the following syntax:
hover
I wanted to say this way: when I click on the $(elemento-principal).not(elemento).on()
except for the div
icon, I go to the product page.
JS
// Seleciona Produto
$('.item').not('.item > .icons > .add-cart').on(clickDeviceEvent, function(){
var prod = $(this).data('filter');
var catg = $(this).data('categ');
var slug = $(this).data('slug');
document.location.href = urlBase + '/produtos/'+catg+'/'+slug;
});
It did not work. I do not know how to do it or if it's possible.
I want to click on the link inside add-cart
, but do not run the function.
I've been able to do it here and I'd like to know if it's the right thing or if there's another way.
The reason I wanted the above solution was that I needed to apply another function to the icon. So I created the function now:
// Add Produto ao Orçamento
$('.item > .icons > .add-cart').on(clickDeviceEvent, function(){
console.log('Vixi');
return false;
});
It worked! But it worked because I put div
. Then when I click on the icon inside return false
, it rotates this function first. And with div
does not let the function of return false
run.
It worked, but is this the best way? Or is this a good thing?