Jquery Clickable Div not working on inner div

Question

I have this markup to make the entire div clickable.

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

And this JS

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

And this css

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

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

But it's not working. Why?!

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

If you want to use jQuery in your code on jsFiddle site, you need to choose it from options available in dropdown on left section "Frameworks & Extensions" - see corrected jsFiddle in my answer below — gregjer, Feb 28 '13 at 20:13

gregjer · Accepted Answer · 2013-02-28T19:57:53.367

4

Change selector from '.mybox' to '.myBox'

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

Updated your jsFiddle (corrected typo and added jQuery which was missing in your example) -> http://jsfiddle.net/ryRnU/17/

edited Feb 28 '13 at 19:57

answered Feb 28 '13 at 09:29

gregjer

2,823
2
19
18

Yes - good catch of the typo - but this doesn't solve it - try yourself in the jsfiddle – SolaceBeforeDawn Feb 28 '13 at 19:53
well there was missing jQuery library in your example, see now updated jsFiddle in my answer – gregjer Feb 28 '13 at 20:04
Thanks - any idea if it is possible to display the URL in the status bar on div hover? – SolaceBeforeDawn Mar 04 '13 at 02:23

score 2 · Answer 2 · answered Feb 28 '13 at 09:29

2

The class on your <div> element is myBox (with an uppercase B), but your selector is:

 $('.mybox')

with a lowercase B. Selectors are case-sensitive so it needs to be:

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

answered Feb 28 '13 at 09:29

Anthony Grist

38,173
8
62
76

see above - didn't work – SolaceBeforeDawn Feb 28 '13 at 19:55

score 1 · Answer 3 · answered Feb 28 '13 at 09:33

The other answers are correct, but in addition to the other answers, you also didn't set a jQuery API to use with your fiddle.

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/

score 1 · Answer 4 · answered Feb 28 '13 at 09:39

1

Try this.

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

answered Feb 28 '13 at 09:39

Hasan Erzi

11
3

No - this doesn't seem to work either http://jsfiddle.net/ryRnU/15/ – SolaceBeforeDawn Feb 28 '13 at 19:55

score 0 · Answer 5 · answered Feb 28 '13 at 09:31

0

Your selector is wrong, Use it like this :

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

answered Feb 28 '13 at 09:31

Mandeep Pasbola

2,631
2
26
50

see above - didn't work – SolaceBeforeDawn Feb 28 '13 at 19:56
But its working fine, can you explain. – Mandeep Pasbola Mar 01 '13 at 06:30

Jquery Clickable Div not working on inner div

5 Answers5