CODEWITHSUNDEEP
jqueryhtml
concept104
concept104

Reputation: 89

Make whole Div clickable using jQuery

CODE:

<style>
    .mydiv {
        border: 1px solid #00f;
        cursor: pointer; 
    }
</style>

<div class="mydiv">blah blah blah. 
    <a href="http://examples.com">Examples link</a>
</div>

I want to click on 'blah blah blah' text and jump to the 'http://examples.com' link using jQuery.

Upvotes: 1

Views: 13905

Answers (7)

Majid Golshadi
Majid Golshadi

Reputation: 2706

you can simply do with HTML

<a href="http://examples.com">
   <div class="yourDiv">blah blah blah. 
      Examples link
   </div>
</a>

but

if you want to do that with jquery do something like this

$(document).ready(function(){

    $(".yourDiv").on('click', function(){
        //As an HTTP redirect (back button will not work )
        window.location.replace("http://www.example.com");
    });

});

Upvotes: 0

Kanoshi
Kanoshi

Reputation: 80

In consideration of the other answers which haven't yet been accepted, I assume that you want to use multiple <div class="mydiv">, with differing href attributes of the <a> element.

If the <a> element will always be the last child of its parent:

$(".mydiv").click(function(){
    window.location.href = this.lastChild.href;
});

Remember to remove whitespace and the end of the <div>.

JSFiddle: http://jsfiddle.net/JAJuE/1/

If the <a> element will be somewhere (though not necessarily at the end) in the <div>:

HTML

<div class="mydiv">blah blah blah.
    <a href="http://examples.com" class="mylink">Examples link</a>
</div>

JS

$(".mydiv").click(function(){
    window.location.href = this.getElementsByClassName("mylink")[0].href;
});

JSFiddle: http://jsfiddle.net/JAJuE/

Upvotes: 0

codingrose
codingrose

Reputation: 15699

JS:

$(".mydiv").click(function(){
    if($(this).find("a").length){
        window.location.href = $(this).find("a:first").attr("href");
    }
});

OR:

Simply write:

<a href="http://examples.com">
    <div class="mydiv">blah blah blah. 
        Examples link
    </div>
</a>

Upvotes: 7

trapridge
trapridge

Reputation: 16

With JQuery as was requested:

$(document).ready(function() {
  $('.mydiv').click(function() {
   document.location.href='http://examples.com';
  });
});

OFC, you can (and should) let the browser handle it as suggested by Hiral.

Upvotes: 0

aviemet
aviemet

Reputation: 1653

If you want to use jQuery to do this, you're looking for the click function. 

$('.mydiv').click(function(){
    location.href = 'example.com';
});

Upvotes: 0

ah-shiang han
ah-shiang han

Reputation: 330

$(document).on("click", ".mydiv", function(){
    location.href = "http://examples.com";
}

Upvotes: 0

Arun P Johny
Arun P Johny

Reputation: 388316

Move the anchor element out of the div to wrap it

<a href="http://examples.com">
    <div class="mydiv">blah blah blah</div>. 
    Examples link
</a>

Upvotes: 0

Related Questions