How to trigger div like <a>

There is a div box on the web site and there is a link. I want to click to container in order to trigger <a>:

<a href="#">sapien sed</a>

but When I clicked on the container div, it does not give response or it is in the infinite loop. How can I solve this problem? That is to say; I want to click the div to trigger <a>

The whole code:

<div class="container">
    <h2>Lorem ipsum dolor sit amet</h2>
    <p>
        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse congue molestie venenatis.
        In adipiscing vulputate sem. Suspendisse potenti. Vestibulum nisl nibh, interdum sit amet pulvinar at,
        malesuada vitae lacus. Aliquam semper <a href="#">sapien sed</a> risus laoreet ultrices. Donec volutpat felis eu justo
        bibendum tempus. Donec non purus sed sapien fringilla tempor ut et metus. Nulla ipsum nibh, dapibus
        ac ornare vitae, fermentum nec nulla.
    开发者_如何学C</p>
</div>

<script type="text/javascript">
    $(function(){
        $("div.container").each(function(){
            var $container = $(this);
            $container.find("a:first").each(function(){
                var $link = $(this);
                $container
                    .css("cursor", "pointer")
                    .click(function(e){
                        $link.trigger("click");
                        return false;
                    });
                $link.bind("click", function(e){
                    e.stopPropagation();
                    return true;
                });
            });
        });
    })
</script>

---

The problem is that you're expecting trigger("click") to cause the default behaviour of the link to occur (i.e. you are expecting the link to be followed and the page it links to loaded). However, that is not what trigger does. All it does is execute the click event handler function bound to the element.

To actually follow the link, you could grab the href and use window.location:

$link.bind("click", function(e){
   window.location = $link.attr("href");
   e.stopPropagation();
   return true;
});

Here's an updated fiddle.

---

To trigger standart "href" links and links with onClick event at the same time:

$(function() { 
    $("div.container").each(function(){
        var $container = $(this);
        $container.find("a:first").each(function(){
            var $this = $(this),
                onClick = this.onclick || null;
            $container
                .css("cursor", "pointer")
                .click(function(e){
                    $link.trigger("click");
                    return false;
                });
            $link.bind("click", function(e){
                if ( !onClick ) {
                    window.location = $(this).attr("href");
                }
                e.stopPropagation();
                return true;
            });
        });
    });
})

---

$(document).ready(function(){
    $('div.container').css("cursor", "pointer").click(function(){
        window.location = $('a', this).first().attr('href');
    });
});

---

$("div.container").click(function()
{
  $('a:first', $(this)).click();
});

---

to make sure, add the function inside of the

$(document).ready(function() { });

otherwise the div might not load before the code runs.