Bind click function of child href to parent div

Question

<div class="parent">
   <a href="#">download link</a>
</div>


$(".parent").bind("click", function(){

alert('test');

});

would like to bind the href click function so that when the .parent is clicked it goes to the location of the nested link.

Answer 1

$(".parent").bind("click", function(){
    window.location.href = $(".parent a").attr("href");
});

Answer 2

Try this:

$(".parent").bind("click", function(){
    alert($(this).children('a').attr('href'));
});​

Answer 3

Since you have only one link inside a parent element, you can totally avoid javascript if your link fills entirely the parent width and height: just set this CSS

.parent a {
   display: block;
   width  : 100%;  /* or set in px if parent has not width specified */
   height : 100%;  /* or set in px if parent has not height specified */
}

Answer 4

Try something like the following, it should work:

$(".parent a").bind("click", function(){
    alert('test');    
});

Answer 5

Then you can do something like that :

// Choose the a tag specifically
$(".parent").bind("click", function() {
    alert($(this).find('a').attr('href'));
});

That should do the trick

Good luck!