how to call child anchor click on parent div click

Question

I have multiple instances of

<div class="picOuterDiv">
   <a href="examplepage.php?var=1" class="iframe" > page one </a>
</div>

<div class="picOuterDiv">
   <a href="examplepage.php?var=2" class="iframe" > page two </a>
</div>

Now I am using jQuery colorbox plugin to create Lightbox's. The lightBox opens when i click the anchor element, The anchor element with the class iframe. It works fine till here, using

$(".iframe").colorbox({iframe:true, width:"646", height:"675"});

What I want is to open the colorbox when I click the parent div. I used the following code to trigger anchor element href when div was clicked, but apparently the href alone wasnt enough, the element clicked should have the class "iframe" . So its not working with this code.

$('.picOuterDiv').each(function(){
        $(this).on('click', function(){
            location.href = $(this).find('a').attr('href');
        });
});

So can anybody help me on how I can make this work ? I hope the Problem is clear. Thank you in advance.

UPDATE: http://jsfiddle.net/VhkFN/3/

Answer 1

$('.picOuterDiv').click(function() {
   window.location.href=$(this).find('a').attr('href');
});​

There are a couple issues with your fiddle. First "var arr[]" is not correct. Second, the hyperlink doesn't have any onclick property, so triggering a click won't do much. You need to grab its href attribute instead.

Demo: http://jsfiddle.net/VhkFN/4/

Answer 2

You can use the click method on that div and trigger the click method on the anchor wich should be used by the colorbox.

something like this:

$('.picOuterDiv').click(function() { $(this).find('a').trigger('click'); } );

Answer 3

This was what worked for me. As i said i was using jquery colorbox.

$(".picOuterDiv").click(function () {
   var anchorHref = $(this).find('a').attr('href');
   $(this).colorbox ({iframe:true, width:"646", height:"675", href: anchorHref});
});