warmonks warmonks - 1 year ago 38
jQuery Question

nesting a link in a div, where that div is surrunded by a link

Good afternoon,

I'm rebuilding some webpages (using only html/css/jquery/js), and one of them has a series of products on it. Each one is contained in their own div, and repeated over the page multiple times. the products all have an image, some text, and a link.

I'm attempting to change the the product slides so that the entire element is clickable. normally no big thing, as i could just wrap the sucker in an tag and be done with it.

However, there is a link on the on the product slide. and the CSS theme being used selects based on both class names and element type, so if i change either the stylings will simply fall off.

I built a rough example of the structure in a codepen:

<a class="product-link">
<div id="product">
<div id="description">text text text</div>
<a class="inner-link">buy now!</a>

I'm wondering the best way to go about handling this situation, I have seen some solutions about using JQuery to listen for the #product div to be clicked, and fire a click event on the link inside. I believe I will be using this solution if no others are found. If possible, I'd like a structural solution over firing events down if possible, as it feels more elegeant for the structure to be like it is in the example, but with valid html

If i could nest a tags, I could simply not put an href on the inner link, and have all the styling applied. then have the href on the outer link, but no styling applied. of course, this is invalid html :(

Thanks for the help and suggestions!

Answer Source

If you don't mind not having the content selectable inside your element, you could make an overlay that sits over top of the content that is itself an anchor. Position the parent as position: relative; and the child <a> overlay as position: absolute; top:0; bottom: 0; left: 0; right: 0;.

Just make sure the overlay is a sibling, not a parent, to your .inner-link anchor and that it comes before it.