使用 jQuery (Wordpress) 使整个 div 可点击

Question

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>

Answer 1

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>

Answer 2

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));