Can I nest

Question

I want to nest a button that performs an Ajax action that is between <a> tags. enter image description here

The whole container should act as a link to a separate webpage while the "favorite" button will perform an unrelated Ajax action. Unfortunately, this is not able to be done because <button> cannot be nested inside an <a> tag.

Is there a simple workaround to achieve to this effect?

Current code:

<a class="button7" onmouseover="displayFavorite('000')" onmouseout="hideFavorite('000')" href="http://www.example.com">
    Math 141
    <button id='000' class="button8" onclick="favorite('000')">Favorite</button>
    <ul>
        <li><strong>Description</strong> Calculus 1 and Calulus 2</li>
        <li><strong>Instructor</strong> Boon Ong</li>
        <li><strong>Documents</strong> 17</li>
    </ul>
</a>

EDIT: Please note, the AJAX was just additional information, its not related to the question.

This sounds like bad UI to me. Make the link and the button both separate UI elements, and not nested. I think users will be confused by a button within a link. — Mike Christensen, Jun 26 '14 at 21:40
The top level element does not have to be an anchor at all. It can just be a normal div or span and still use those mouse events — Michael, Jun 26 '14 at 21:42
If you are performing an AJAX function, why not verify where in `` was clicked, and perform an additional function by `$.post()` to follow the link afterwards? — Sablefoste, Jun 26 '14 at 21:42
It still needs to be a link though. Sorry, let me include the `href` — user3677286, Jun 26 '14 at 21:43
@Sable Foste The user should be able to click the "favorite" button without actually linking to the page — user3677286, Jun 26 '14 at 21:45

score 5 · Accepted Answer · edited Jul 29 '22 at 20:29

5

Something like this:

<div class="container">
    <a class="button7" href="http://google.co.uk" onmouseover="displayFavorite('000')" onmouseout="hideFavorite('000')">
        Math 141
    
        <ul>
            <li><strong>Description</strong> Calculus 1 and Calulus 2</li>
            <li><strong>Instructor</strong> Boon Ong</li>
            <li><strong>Documents</strong> 17</li>
        </ul>
    </a>
    <button id='000' class="button8" onclick="favorite('000')">Favorite</button>
</div>

CSS:

.container {
    position:relative;
    width:400px;
}
.button7 {
    width:100%;
    height:auto;
    display:block;
    background:red;
}
.button8 {
    position:absolute;
    top:5px;
    right:5px;
}

Positioning an element absolutely in a parent container with position:relative; enables you to use the css properties top, left, right, and bottom relative to the container that encloses it.

Setting the <a> (with class .button7) to display:block; means that the hyperlink will act as a block level element and take up the entire "block" (i.e. space afforded to it by its parent)

http://jsfiddle.net/t29m4/

edited Jul 29 '22 at 20:29

TylerH

20,799
66
75
101

answered Jun 26 '14 at 21:41

adaam

3,700
7
27
51

I like this solution, thats interesting how the will even take up the space around the "Favorite" button – user3677286 Jun 26 '14 at 21:49
@user3677286 Indeed! Although if you are redirecting the user anywhere off the back of clicking the hyperlink, as someone else has mentioned there are obviously UI issues with this method. – adaam Jun 26 '14 at 21:59
1
Note however, that `
– Nisse Engström Jun 27 '14 at 06:16
@NisseEngström good point, most browsers do a good job of ignoring this however, which I guess should be seen as a bad thing. – adaam Jul 03 '14 at 13:50
1

Apparently, you _can_ in **HTML5**. The `` elements is `transparent` which means that its content model depends on the parent element. – Nisse Engström Jul 05 '14 at 14:03

College Student · Answer 2 · 2021-02-23T17:46:49.920

Another option, which has the advantage of only requiring you to make a one line change, is to prevent the click event from propagating up to the link. You can do this by calling event.preventDefault() when the button is clicked.

<button id='000' class="button8" onclick="(e)=>{favorite('000'); e.preventDefault();}">Favorite</button>

Not sure if this syntax is quite right or if this approach follows best practices, but there does seem to be good browser support for preventDefault

Looks like this approach was recommended on SO before

Can I nest inside of

2 Answers2

Can I nest