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>
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.
Add a click handler for the card, and have it perform a click on the anchor:
$(".card").click(function() {
$(this).find("a")[0].click();
});
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>