jquery - Jquery Clickable Div 不适用于内部 div

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）-> 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 与您的小提琴一起使用。

Also, I like to place the jQuery code inside a $(document).ready(function(){...}) function, to make sure the code is loaded as soon as the document is done loading.

This code should work on any website, with a jquery script imported to it. http://jsfiddle.net/ryRnU/8/

Answer 4

Try this.

$(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;
});