Highway not working with DOM elements rendered by javascript

[Rinmawia]

So, I have a list of cards that is rendered using Javascript, and every cards has it's link, Highway doesn't seem to work on these elements. Is there anyway to fix this?

cardContainer.innerHTML += `
                    <a class="card" href="/${card.url}" draggable="false">
                        <h1 class="title"><span>${card.title}</span></h1>
                        <p class="description"><span>${card.description}</span></p>
                        <video class="card-video" muted loop>
                          <source src="${card.image}" type="video/webm">
                        </video>
                    </a>
                `;

[stefbowerman]

For links rendered via JS, you have to explicitly attach them using attach on your Highway instance. This would look something like this:

const highway = new Highway.Core({...})

cardContainer.innerHTML += `
                    <a class="card" href="/${card.url}" draggable="false">
                        <h1 class="title"><span>${card.title}</span></h1>
                        <p class="description"><span>${card.description}</span></p>
                        <video class="card-video" muted loop>
                          <source src="${card.image}" type="video/webm">
                        </video>
                    </a>
                `;

highway.attach(document.querySelectorAll('a.card'))