Funkcje nie działają na dynamicznie dodanych divach.

Question

Funkcja np 

const postMenuToggle = (e) => {
    const closestMenuList = e.target.closest('.postMenu').querySelector('.postMenuList')
    closestMenuList.classList.toggle("hideMenu")
}

nie wykonuje się na dynamicznym divie tworzonym przez funkcję
 

const createPost = () => {
    const postBox = document.createElement('div')
    const postImg = document.createElement('img')
    const postInfo = document.createElement('div')
    const postCounter = document.createElement('div')
    const postPCount = document.createElement('p')
    const postComment = document.createElement('div')
    
    postBox.append(postImg)
    postBox.append(postInfo)
    postCounter.append(postPCount)
    postBox.append(postCounter)
    postBox.append(postComment)
    
    postCounter.classList.add('counter')
    postBox.classList.add('postBox')
    postPCount.classList.add('count')
    postComment.classList.add('commentBox')
    postInfo.classList.add('postInfo')
    
    postPCount.textContent =  Math.floor(Math.random() * 10000) + " polubień"
    postInfo.innerHTML = `                
    <button>
    <i class="fa-regular fa-heart"></i>
    </button>
    <button>
    <i class="fa-regular fa-comment"></i>
    </button>
    <button>
    <i class="fa-regular fa-paper-plane"></i>
    </button>
    
                    <div class="postMenu">
                    <button class="postMenuBtn">
                        <i class="fa-solid fa-ellipsis"></i>
                    </button>

                    <div class="postMenuList hideMenu">
                        <ul>
                            <li>
                                <button><i class="fa-solid fa-caret-right"></i>Usuń post</button>
                            </li>
                            <li>
                                <button><i class="fa-solid fa-caret-right"></i>Edytuj</button>
                            </li>
                        </ul>
                    </div>
                </div>
    
    `
    postComment.innerHTML = `<i class="fa-regular fa-user"></i> <input type="text" name="" id="" placeholder="Dodaj komentarz...">`
    


    let randId = Math.floor(Math.random()*1000+1)
    postImg.setAttribute('src', `https://picsum.photos/680/500?random=${randId}`)

    mainContainer.append(postBox)
    
}

 

Klikając w przyciski 

                <div class="postMenu">
                    <button class="postMenuBtn">
                        <i class="fa-solid fa-ellipsis"></i>
                    </button>

                    <div class="postMenuList hideMenu">
                        <ul>
                            <li>
                                <button class="deletePostBtn"><i class="fa-solid fa-caret-right"></i>Usuń post</button>
                            </li>
                            <li>
                                <button><i class="fa-solid fa-caret-right"></i>Edytuj</button>
                            </li>
                        </ul>
                    </div>
                </div>

nie dzieje się nic. Z czym może być problem?

Answer 1

Możesz też przypisać zdarzenie w trakcie tworzenia dynamicznie div-a, bez

for(const postMenuBtn of postMenuBtns){
    postMenuBtn.addEventListener('click', postMenuToggle)
}

i

const postMenuBtns = document.querySelectorAll('.postMenuBtn')

 

tylko, np.

[ on-line ]

const createPost = () => {
  
  ...

  postInfo.querySelector('.postMenuBtn').addEventListener('click', postMenuToggle);
  mainContainer.append(postBox);
}

 

Answer 2

Bo event listenery są dodawane tylko do elementów, które już istnieją w DOM-ie w czasie ich dodawania. Jak dodajesz przed powstaniem tego diva, to nie zostanie do niego przyczepiony.

Są dwa rozwiązania:

1. przypinasz listener w trakcie tworzenia diva,
2. używasz event delegation.

Comments

listenery przypinałem za pomocą for of

    for(const postMenuBtn of postMenuBtns){
        postMenuBtn.addEventListener('click', postMenuToggle)
    }

wstawiłem to do funkcji tworzącej diva lecz nadal nie działa. Powinienem zmienić coś z tym listenerem?

---

A jak pobierasz postMenuBtns?

---

pobieram za pomocą

    const postMenuBtns = document.querySelectorAll('.postMenuBtn')

Właśnie wstawiłem to do funkcji tworzącej diva i zaczyna coś działać.

Dzięki wielkie za pomoc