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>

CodePudding user response：

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.

CodePudding user response：

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>

<iframe name="sif1" sandbox="allow-forms allow-modals allow-scripts" frameborder="0"></iframe>

CodePudding user response：

Add a click handler for the card, and have it perform a click on the anchor:

$(".card").click(function() {
  $(this).find("a")[0].click();
});

CodePudding user response：

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>