How to make a whole 'div' clickable using jQuery

How can it be possible to make a whole 'div' clickable?

<div class="clickable" url="http://google.com">
Text
</div>

In this case, you can use the following jQuery script to redirect users to the url specified when clicking the 'div' area: 

$("div.clickable").click(
function()
{
window.location = $(this).attr("url");
return false;
});
// Source: http://stackoverflow.com

Here, return false is used to avoid an event bubbling. Some recommend to use event.preventDefault() rather than return false. Please refer to  here for more about event.preventDefault() and return false.

If you want to specify the url directly within the jQuery script, please use the following:

jQuery('.clickable).click(function(){
window.location = 'http://www.google.com';
});

Leave a Comment