Джейд/МОПС Вставка тэг в друг

Question

Это мой МОПСА/JADE кода ниже

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

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

Но этот код не печатается правильно, .tile имеет печать из <a>, вы можете просмотрите напечатанный код ниже.

<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> 

я нужен этот код так:

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

Answer 1

Ссылки внутри ссылки недействителен HTML. Джейд предположительно использует встроенный HTML-конструктор, который исправляет синтаксис. Вы должны увидеть тот же результат, если вручную напишите HTML-код, который, по вашему мнению, хотите, и просмотрите его в браузере - он переместит второй тег a за пределы первого.

Answer 2

У меня был аналогичный прецедент, где мне нужен элемент DOM с обработчиком кликов внутри div, который находился внутри метки привязки.

Я использовал пролет для внутреннего интерактивного элемента и использовал функцию JavaScript addEventListener. Не забудьте использовать event.preventDefault() для внутреннего интерактивного элемента, поэтому вы не запускаете href на прилагаемом теге привязки.