I have some cards with an image, text, and link within them. Wrapping the card with an anchor tag is not possible in my case. Is it possible to target the anchor tag within the card and then make the entire card clickable to go to that link using jquery?
Ideal state: when you click anywhere on the card, the link is triggered and the user is taken to it.
<div class="todays-news">
<div class="container">
<div class="owl-carousel owl-theme">
<div class="item">
<div class="card">
<img src="images/home/home-image.png" />
<div class="card-body">
<strong>This is a title</strong>
<p>This is a paragraph.</p>
<a href="/">Continue Reading</a>
</div>
</div>
</div>
<div class="item">
<div class="card">
<img src="images/home/home-image-2.png" />
<div class="card-body">
<strong>This is a title</strong>
<p>This is a paragraph.</p>
<a href="/">Continue Reading</a>
</div>
</div>
</div>
</div>
</div>
</div>
I have some cards with an image, text, and link within them. Wrapping the card with an anchor tag is not possible in my case. Is it possible to target the anchor tag within the card and then make the entire card clickable to go to that link using jquery?
Ideal state: when you click anywhere on the card, the link is triggered and the user is taken to it.
<div class="todays-news">
<div class="container">
<div class="owl-carousel owl-theme">
<div class="item">
<div class="card">
<img src="images/home/home-image.png" />
<div class="card-body">
<strong>This is a title</strong>
<p>This is a paragraph.</p>
<a href="https://www.example.com/">Continue Reading</a>
</div>
</div>
</div>
<div class="item">
<div class="card">
<img src="images/home/home-image-2.png" />
<div class="card-body">
<strong>This is a title</strong>
<p>This is a paragraph.</p>
<a href="https://www.example.com/">Continue Reading</a>
</div>
</div>
</div>
</div>
</div>
</div>
5 Answers
Reset to default 14This can be achieved with css, no javascript required.
.item {
position: relative;
}
.item a::before {
content: "";
position: absolute;
top: 0px;
right: 0px;
bottom: 0px;
left: 0px;
}
The element that you want to make clickable gets a position: relative. That creates a new containment block. We then add a before pseudo-class to the link. Position it absolutely and stretch it over the entire containment block.
https://play.tailwindcss.com/q0Pje5H2Br
Yes, you can do this with JavaScript, though if you could solve the problem with not being able to make the card an anchor, that would be better. There's no reason you can't put a div in an a element, a's content model is transparent.
But if you can't:
$(document).on("click", ".card", function(event) {
const $this = $(this);
// Don't interfere with a click actually on the anchor
// (that way, the user can still right-click it and
// use the browser-supplied menu for oew in new tab,
// shift click, etc.)
if ($this.find($(event.target).closest("a")[0]).length === 0) {
// Not on the anchor, do it
event.preventDefault();
$this.find("a")[0].click();
}
});
Note that you have to call click on the DOM element, not the jQuery object. If you call it on the jQuery object, it won't trigger the default action.
Simply use an onclick handler on the div:
<div class="todays-news">
<div class="container">
<div class="owl-carousel owl-theme">
<div class="item">
<div class="card" onclick="this.querySelector('a').click(); return true;">
<img src="images/home/home-image.png" />
<div class="card-body">
<strong>This is a title</strong>
<p>This is a paragraph.</p>
<a href="https://www.example.com/">Continue Reading</a>
</div>
</div>
</div>
<div class="item" onclick="this.querySelector('a').click(); return true;">
<div class="card">
<img src="images/home/home-image-2.png" />
<div class="card-body">
<strong>This is a title</strong>
<p>This is a paragraph.</p>
<a href="https://www.example.org/">Continue Reading</a>
</div>
</div>
</div>
</div>
</div>
</div>Add a click handler for the card, and have it perform a click on the anchor:
$(".card").click(function() {
$(this).find("a")[0].click();
});
You can wrap block elements with <a>. It is valid HTML5 and renders your card clickable. You may need to adjust the css rules for the text inside this block however.
Edit: Since this isn't possible in your case, could you specify why?
<div class="todays-news">
<div class="container">
<div class="owl-carousel owl-theme">
<a class="item" href="https://www.example.com/">
<div class="card">
<img src="images/home/home-image.png" />
<div class="card-body">
<strong>This is a title</strong>
<p>This is a paragraph.</p>
<a>Continue Reading</a> <!-- unsure about the correct tag here -->
</div>
</div>
</a>
<a class="item" href="https://www.example.com/">
<div class="card">
<img src="images/home/home-image-2.png" />
<div class="card-body">
<strong>This is a title</strong>
<p>This is a paragraph.</p>
<a>Continue Reading</a> <!-- unsure about the correct tag here -->
</div>
</div>
</a>
</div>
</div>
</div>
<a class="card">...</a>. Don't do this with JavaScript, it breaks the user's browser and the fundamental contracts of the Internet in so many ways: Users can't preview the link to see where it leads, they can't navigate to the link or click it with the keyboard or assistive devices, they can't right-click/middle click to open in a new tab, etc etc. It's a terrible practice. – user229044 ♦ Commented Nov 22, 2021 at 16:25