Solution 1 :

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

Your issue is that you have $ on the parameters of the click event handler. That variable passed in is the Event generated, not jQuery. There are a few ways to fix this.

1. Using the global variable

jQuery(".myBox").click(function() {
    window.location = jQuery(this).find("a").attr("href");
    return false;
});

2. Storing jQuery in $

var $ = jQuery;

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

3. Using a document ready that passes jQuery in, allowing you to name it $

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

4. Using a simple IIFE. Similar to a document ready, but less overhead

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

Solution 2 :

I̶n̶ ̶y̶o̶u̶r̶ ̶H̶T̶M̶L̶,̶ ̶y̶o̶u̶ ̶d̶o̶n̶’̶t̶ ̶h̶a̶v̶e̶ ̶a̶n̶ ̶e̶l̶e̶m̶e̶n̶t̶ ̶w̶i̶t̶h̶ ̶t̶h̶e̶ ̶c̶l̶a̶s̶s̶ ̶̶m̶y̶B̶o̶x̶̶.̶ (this was fixed in an edit)

A couple of points though, do you really need jQuery for this? It seems like using a hammer to kill a fly. Usually for “entirely clickable elements”, you can use a relative positioned parent, absolute positioned link, and set it to the top/left and 100% width and height.

.myBox{padding:10px;border:1px solid #ccc;position: relative;}
.cover{ position: absolute; top: 0; left: 0; width: 100%; height: 100%; }
.cover:hover { background:rgba(0,95,235,.25);
<p class="myBox">This whole box should link.<a href="#" class="cover"></a></p>

You also have the option of putting the anchor outside whatever you want to link (based on your edit, I see this may not be an option?):

.myBox{padding:10px;border:1px solid #ccc;position: relative;}
<a href="#"><p class="myBox">This whole box should link.</p>

If you DO need jQuery for some reason, you can handle all of your jQuery functions in a single ready function, and pass the click event handler to it. (Note, you should also handle the situation where a link is NOT present, otherwise you’ll send users to a blank/broken URL if its clicked on):

jQuery(document).ready(function($){
  $('.myBox').on('click', function(){
    var location = $(this).find('a').attr('href');
    if( location )
      window.location = location;
  });
});
.myBox{ padding: 10px; border: 10px; }
.myBox:hover {cursor: pointer; background: #0095ee;}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="myBox">
  <p>This is test.<a href="https://example.com/">This is a link</a></p>
</div>

<div class="myBox">
  <p>This is with no link</p>
</div>

Problem :

I have a wordpress installation and am trying to create a function that makes an entire div clickable based on the href within it. I’ve found a lot of documentation that tells me to do this.

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

But it’s not working, nothing happens upon clicking. What’s odd though is that if I do this just as a test

jQuery(".myBox").click(function($) {
    window.location = "http://www.google.com"
    return false;
});

then it does work and the div will redirect to google.com, so it doesn’t seem to be a problem with the way I’m implementing the script. Am I going wrong with the first method somewhere? Here’s my HTML

<div class="myBox">
<p><a href="http://www.example.com/notworking">This whole box should link but doesn't.</a></p>
</div>

Comments

Comment posted by Taplar

You’re issue is that you are passing

Comment posted by api.jquery.com/click

Could I ask why you don’t put the div inside the anchor tag? Isn’t this an option? if it is, you’d save yourself the functions etc. Could I also ask whether you actually have a function named $ which is firing everytime you click on it?

Comment posted by Taplar

@ItrysohardbutIcryharder There isn’t a function named

Comment posted by I try so hard but I cry harder

@Taplar I already assumed such thing, but I would rather ask for clarification, instead of jumping to conclusions.

Comment posted by Taplar

Given that they have

Comment posted by Teague

That’s it, I hadn’t clocked having to change the event handler an additional time in the second line. Thank you!

By