Question

我有这个标记使整个div可点击。

<div class="myBox">
<div class="two">
    <h2> Title</h2>
    <p> This is the description</p>
    <a class="some-button-class" href="http://www.google.com/">check here</a>
</div>
</div>

这个JS

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

这个css

.myBox { cursor:pointer;width:200px;height:200px;}
h2 {font-size:28px;}
p { color:#fff }

.two { 
background: #999;
padding:50px;
}

但它不起作用。为什么呢？！

的jsfiddle http://jsfiddle.net/ryRnU/16/

Answer 1

将选择器从“.mybox”更改为“.myBox”

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

更新了你的jsFiddle（更正的拼写错误并添加了你的例子中缺少的jQuery） - ＆gt; http://jsfiddle.net/ryRnU/17/

Answer 2

<div>元素上的类是myBox（大写字母B），但您的选择器是：

 $('.mybox')

使用小写B.选择器区分大小写，因此需要：

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

Answer 3

其他答案是正确的，但除了其他答案之外，您还没有设置jQuery API与小提琴一起使用。

另外，我喜欢将jQuery代码放在$(document).ready(function(){...})函数中，以确保在文档加载完成后立即加载代码。

此代码应在任何网站上运行，并导入jquery脚本。 http://jsfiddle.net/ryRnU/8/

Answer 4

试试这个。

$(document).ready(function(){
     $(".myBox").bind('click', function(){
        console.log($(this));
         window.location=$(this).find("a").attr("href"); 
         return false;
    });
});

Answer 5

您的选择器错误，请按照以下方式使用：

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

Jquery Clickable Div无法处理内部div

5 个答案: