Делаем весь div кликабельным, используя jQuery (Wordpress)

Question

У меня есть установка WordPress, и я пытаюсь создать функцию, которая делает весь div кликабельным, основываясь на href внутри него. Я нашел много документации, которая говорит мне сделать это.

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

Но это не работает, ничего не происходит при нажатии. Что странно, так это то, что если я делаю это просто в качестве теста

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

, тогда он работает, и div будет перенаправлять на google.com, так что, похоже, это не проблема Я реализую сценарий. Я что-то не так с первым методом? Вот мой 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

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

Ваша проблема в том, что у вас есть $ в параметрах обработчика событий щелчка. Эта переданная переменная является сгенерированной Event, а не jQuery. Есть несколько способов исправить это.

1. Использование глобальной переменной

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

2. Хранение jQuery в $

var $ = jQuery;

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

3. Используя готовый документ, который передает jQuery в, что позволяет вам назвать его $

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

4. Используя простой IIFE. Аналогично готовому документу, но с меньшими затратами

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

Answer 2

* 1000 В * ВАШЕМ Html, ̶ вам не придется Элемент с классовым ̶ ̶m̶y̶B̶o̶x̶. (Это было зафиксировано в редактировании) 1003 * Пары моментов, хотя, действительно ли вы потребность jQuery за это? Кажется, с помощью молотка, чтобы убить муху. Обычно для «полностью кликабельных элементов» можно использовать позиционированный родительский элемент relative, позиционированную ссылку absolute и установить для него верхний / левый угол и ширину и высоту 100%.

.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>

У вас также есть возможность поместить якорь вне того, что вы хотите связать (основываясь на ваших изменениях, я вижу, что это может быть не вариант?):

.myBox{padding:10px;border:1px solid #ccc;position: relative;}

<a href="#"><p class="myBox">This whole box should link.</p>

Если вам по каким-либо причинам вам нужен jQuery, вы можете обработать все свои jQuery функции в одной функции ready и передать щелкните обработчик события к нему. (Обратите внимание, что вам также следует разобраться с ситуацией, когда ссылка НЕ ​​присутствует, в противном случае вы отправите пользователей на пустой / неработающий URL, если на него нажали):

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>