Select an element in the DOM that will be loaded via JS

Asked

Viewed 42 times

0

I want to make a mousehover on some elements that will be loaded via JS. How do I select an element that has not yet been loaded?

Element to be loaded through a foreach and insertAdjacentHTML

export const renderMemoriaCard = () => {

var markupMemoriaOut = '';
memoriaMensal.forEach(el => {
    
    var markupContent = '';
    el.filmes.forEach(num => {
        markupContent += `
        <p class="memoria__film opensans-bold rosa-neon">
            ${num.titulo}
        </p>
        <p class="memoria__tec opensans-regular branco">${num.fichatec}</p>
        <p class="memoria__direcao opensans-regular branco">
            ${num.direcao}
        </p>
        `
    });

    markupMemoriaOut += `
    <a href="memoria/${el.id}.html" class="memoria__card"> 
    <div class="memoria__bg memoria__bg--${el.id}">&nbsp;</div>
        <p class="memoria__header bebas">
        <span class="memoria__sessao">${el.sessao}:</span> ${el.local}
        </p>
        <div class="memoria__content">
        ${markupContent}
        </div>
        <div class="memoria__footer">
        <div class="memoria__data bebas branco">
            ${el.data}
        </div>
        <div class="memoria__btn">
            <svg class="memoria__btn-icon">
            <use xlink:href="img/right-arrow.svg#Layer_1"></use>
            </svg>
        </div>
        </div>
    </a>
    `;
});

elements.memoria.insertAdjacentHTML('afterbegin', markupMemoriaOut);

}

Function to mouse Hover by adding some classes in the elements after loading:

const mouseHoverCard = () => {
    elements.memoriaContent.classList.toggle = '.memoria__content--hover';
    elements.memoriaBg.classList.toggle = '.memoria__bg--hover'
    elements.memoriaData.classList.toggle = '.memoria__data--hover';
}

list of selected elements:

memoriaContent: document.querySelector('.memoria__content'),
memoriaData: document.querySelector('.memoria__data'),
memoriaBg: document.querySelector('.memoria__bg')
javascript

  • I think your question is missing information. How you determine when in fact the elements will be on the page (because you can only select them once they are already in the DOM). One option is to add Event listeners immediately after the insertion of these elements on the page. Try [Dit] the question to clarify this a little bit (if possible, also include the code that performs this insertion). :-)

  • The code that performs the insertion on the page is a foreach with insertAdjacentHTML

  • They are in string, ie are not HTML elements yet, what you can do is stop using insertAdjacentHTML and innerHTML and move to use Document.createelement to generate one by one the elements and even before adding to the body of the page you will already have them selected, if this is too complicated you can use Documentfragment and create a DIV inside it, in this DIV use insertAdjacentHTML with its string, then in the fragment you can use querySelector to obtain the elements and then you can add the fragment directly to Elements.memoria with appendchild ...

  • ... of course there will be a DIV as a parent element, but by its code this will not be a problem, if it happens to be back to the first suggestion, create one by one the elements and not use strings.

1 answer

0


You can create a function that adds these events and call it after performing the function that creates the elements on the screen.

Browser other questions tagged javascript

You are not signed in. Login or sign up in order to post.