Making whole div/figure clickable with Jquery

Question

I am wanting to make the whole div/figure clickable, but I have to do it with Jquery as this is a wordpress plugin. At the moment only the heading is clickable I dont want to go to the heading to active the href I would like to be able to click anywhere on the div/image and it should go to the link.

You can see the link here https://elysian.dijestdesigns.com/voice/

Here's the code

<div class="ctgrid">
    <div class="item-grid" data-id="ex_id-extp-5203-398"> 
        <div class="exp-arrow ">
            <figure class="tpstyle-img-9 tppost-398">
                <a href="https://elysian.dijestdesigns.com/portfolio/jessica-roberts/"><img width="1365" height="2048" src="https://elysian.dijestdesigns.com/wp-content/uploads/2020/01/14114983_1408363416137891_3279299182950828483_o.jpg" class="attachment-post-thumbnail size-post-thumbnail wp-post-image" alt="" srcset="https://elysian.dijestdesigns.com/wp-content/uploads/2020/01/14114983_1408363416137891_3279299182950828483_o.jpg 1365w, https://elysian.dijestdesigns.com/wp-content/uploads/2020/01/14114983_1408363416137891_3279299182950828483_o-200x300.jpg 200w, https://elysian.dijestdesigns.com/wp-content/uploads/2020/01/14114983_1408363416137891_3279299182950828483_o-683x1024.jpg 683w, https://elysian.dijestdesigns.com/wp-content/uploads/2020/01/14114983_1408363416137891_3279299182950828483_o-768x1152.jpg 768w, https://elysian.dijestdesigns.com/wp-content/uploads/2020/01/14114983_1408363416137891_3279299182950828483_o-1024x1536.jpg 1024w, https://elysian.dijestdesigns.com/wp-content/uploads/2020/01/14114983_1408363416137891_3279299182950828483_o-600x900.jpg 600w" sizes="(max-width: 1365px) 100vw, 1365px"></a>
    <figcaption>
    <div></div>
    <h3>
    <a href="https://elysian.dijestdesigns.com/portfolio/jessica-roberts/">Jessica Roberts</a>
    </h3>
    </figcaption>

    </figure>                   
    <div class="exclearfix"></div>

    </div>
</div>

I have tried adding this, but that didn't seem to work

$(".item-grid").click(function(){
     window.location=$(this).find("a").attr("href"); 
     return false;
    });

I am not a pro coder so here to get some help from you guys please. Thanks

@Jessica Actually your code is perfect ! The issue is from `jquery` open your site and check console it has `Uncaught TypeError: $ is not a function`. — Jaydeep Mor, Jan 28 '20 at 08:18
Does this answer your question? [TypeError: $ is not a function when calling jQuery function](https://stackoverflow.com/questions/12343714/typeerror-is-not-a-function-when-calling-jquery-function) — Jaydeep Mor, Jan 28 '20 at 08:22
Uncaught TypeError: $ is not a function because wordpress run jquery in safe mode, just replace «$» with «jquery» fix this error — Nikolay, Jan 28 '20 at 08:36
Hi Guys, thanks so much for your help :) Knew I came to the right place for help. Appreciate it. — Jessica, Jan 28 '20 at 09:01

score 1 · Accepted Answer · answered Jan 28 '20 at 08:30

1

Try to wrap the it in function with document.ready.

jQuery(document).ready(function() {
    jQuery(function ($) {
        $(".item-grid").click(function() {
            window.location=$(this).find("a").attr("href"); 
            return false;
        });
    });
});

#Reference

answered Jan 28 '20 at 08:30

Jaydeep Mor

1,532
2
15
39

Hi Jaydeep, I was wondering how to make the filter have multiple select on it? At the moment I can only select one of the dropdowns. Would you perhaps know how to do this also? The question I posted here https://stackoverflow.com/q/59962575/8861039 – Jessica Jan 29 '20 at 14:31
Hii @Jessica I checked it and need to try firat. Its 08:30PM for me so I will check tomorrow. – Jaydeep Mor Jan 29 '20 at 14:58
Perfect thanks soooo much, really appreciate it :) – Jessica Jan 29 '20 at 15:04
Done ? I mean hide `href` value ? – Jaydeep Mor Jan 30 '20 at 08:14
I manage to just add return true and it worked :) – Jessica Jan 30 '20 at 08:35

score 0 · Answer 2 · edited Jan 28 '20 at 08:29

0

try to add this code in your page, when page loads it will create a link which can have styling via css for cover-all card

$(function() {
    $(".ctgrid").each(function() {
        let $el = $(this);
        $el.prepend(`<a href="${$el.find('a').attr('href')}"></a>`);
    });
});

edited Jan 28 '20 at 08:29

DumbCoder7

255
1
8

answered Jan 28 '20 at 08:08

Nikolay

337
4
9

thanks so much for your help, appreciate it – Jessica Jan 29 '20 at 07:42

score 0 · Answer 3 · answered Jan 28 '20 at 08:18

Check this. Hope it helps.

$(".item-grid").click(function(){
     var locationGoto=$(this).find("a").attr("href"); 
     window.location.href = locationGoto;
    });

.ctgrid{overflow:hidden}
.item-grid{width:33%; float:left; cursor: pointer}
.item-grid img{width:100%}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="ctgrid">
    <div class="item-grid" data-id="ex_id-extp-5203-398"> 
        <div class="exp-arrow ">
            <figure class="tpstyle-img-9 tppost-398">
                <a href="https://elysian.dijestdesigns.com/portfolio/jessica-roberts/"><img src="https://elysian.dijestdesigns.com/wp-content/uploads/2020/01/14114983_1408363416137891_3279299182950828483_o.jpg"></a>
    <figcaption>
    <h3>
    <a href="https://elysian.dijestdesigns.com/portfolio/jessica-roberts/">Jessica Roberts</a>
    </h3>
    </figcaption>

    </figure>                   
    <div class="exclearfix"></div>

    </div>
</div>

Making whole div/figure clickable with Jquery

3 Answers3