CODEWITHSUNDEEP
jqueryhtml
1252748
1252748

Reputation: 15362

Use Div as Link with jQuery Data

I have a <div> that I would like to use as a link.

Is using JQuery's data method to attach the URL I want to link to a 'good practice' way accomplish this?

Having a the <div> trigger a click event on a nested <a> tag was starting to get messy.

Upvotes: 0

Views: 1743

Answers (2)

Belladonna
Belladonna

Reputation: 3862

An alternative, if the <a> is nested within the <div> you're talking about:

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

Though seeing more of your code would help to find the most optimal answer.

Upvotes: 1

pbojinov
pbojinov

Reputation: 927

You can add a data-url to the div, then use jquery to see what the data-url on the clicked div is and then finally navigate the page to that url using window.location.href = url;

HTML:

<div id="container" data-url="http://google.com">Click me</div>​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​

jQuery:

​$('#container').click(function() {
   var url = $(this).attr('data-url');
   window.location.href = url; 
)};​​​​​

see working example - http://jsfiddle.net/JfAHp/

Upvotes: 0

Related Questions