【问题标题】：Making an entire div clickable using jQuery (Wordpress)使用 jQuery (Wordpress) 使整个 div 可点击
【发布时间】：2020-01-17 19:21:08
【问题描述】：

我有一个 wordpress 安装，并正在尝试创建一个函数，该函数可以根据其中的 href 使整个 div 可点击。我发现很多文档告诉我这样做。

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>

【问题讨论】：

您的问题是您将$ 传递给点击事件处理程序。第一个参数是Event，而不是jQuery
请问你为什么不把 div 放在锚标签里面？这不是一个选项吗？如果是的话，你会为自己保存函数等。我还可以问一下你是否真的有一个名为 $ 的函数，每次点击它都会触发它？ api.jquery.com/click
@ItrysohardbutIcryharder 没有名为 $ 的函数。用户假设第一个参数提供给它的事件处理程序 jQuery。它不是。他们很可能因为使用$(document).ready() 而感到困惑，这确实将jQuery作为第一个参数传入
@Taplar 我已经假设了这样的事情，但我宁愿要求澄清，而不是草率下结论。
鉴于他们在参数上有$，因此询问他们是否有一个名为$ 的函数是不合事实的。不管他们可能有什么功能，该功能内的$ 将是传入的内容。

标签： javascript jquery html wordpress

【解决方案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));

【讨论】：

就是这样，我不必在第二行再次更改事件处理程序。谢谢！

【解决方案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̶̶.

尽管有几点，你真的需要 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);

&lt;p class="myBox"&gt;This whole box should link.&lt;a href="#" class="cover"&gt;&lt;/a&gt;&lt;/p&gt;

您还可以选择将锚点放在要链接的任何内容之外（根据您的编辑，我认为这可能不是一个选项？）：

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

&lt;a href="#"&gt;&lt;p class="myBox"&gt;This whole box should link.&lt;/p&gt;

如果您出于某种原因确实需要 jQuery，您可以在单个 ready 函数中处理所有 jQuery 函数，并将点击事件处理程序传递给它。（注意，您还应该处理不存在链接的情况，否则如果点击链接，您会将用户发送到空白/损坏的 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>

【讨论】：