CODEWITHSUNDEEP
htmlpug
Paulinho Rodrigues
Paulinho Rodrigues

Reputation: 71

Jade/PUG Insert tag a inside other a

This is my PUG/JADE code is below

a(href="#card")
  div.tile 
    h1 open card

    #card
      a(href="#") click to close

But this code doesn't print correctly, the .tile has print out of <a>, you can view the printed code below.

<a href="#card"></a>
<div class="tile"> 
  <a href="#card">
    <h1>Open card</h1>
  </a>

  <div id="card">
    <a href="#card"></a>
    <a href="#">click to close</a>
  </div>
</div>

i need this code so:

<a href="#card">
  <div class="tile"> 
    <h1>Open card</h1>
    <div id="card">
      <a href="#">click to close</a>
    </div>
  </div>
</a>

Upvotes: 1

Views: 1679

Answers (2)

Stefan Musarra
Stefan Musarra

Reputation: 1501

I had a similar use case, where I needed a DOM Element with a click handler inside a div which was inside an anchor tag.

I used a span for the interior clickable element, and used the JavaScript function addEventListener. Remember to use event.preventDefault() on the interior clickable element, so you do not trigger the href on the enclosing anchor tag.

Upvotes: 0

Tom Jardine-McNamara
Tom Jardine-McNamara

Reputation: 2608

Links within links is invalid HTML. Jade is presumably using a HTML builder internally which will correct the syntax. You should see the same result if you hand write the HTML you think you want and view it in a browser - it will move the second a tag outside the first.

Upvotes: 3

Related Questions