Menu doesn't appear when we create new articles

Hi,

at the beginning, when my page is loaded, I have the possibility to click on the 3 little dots to show the menu.

If I add dynamically an article by clicking on the “Ajout article” button located in the header, I’m not able anymore to show the menu.

  1. Do you find it’s a good way to show the menu when we click on the three little dots with this javascript code ?
  2. Does another way exist to show the menu easier ? In fact, this menu must be shown on each article as you have probably understood.

You can find below a copy of my source code :

Thanks for your help.

Have a nice day.
Thierry

Hi @fc233224, yes you’re only listening to click events on elements that initially exist; to fix this, you have 2 options:

  • Add another click listener for each new article; to do so, you’d extract the handler so you can ruse it elsewhere:

    const $overlay = document.getElementById('overlay')
    const container = document.querySelector('.container')
    
    const toggleMenu = event => {
      // The event.target would be the $button element here
      const $actionNav = event.target.nextElementSibling
    
      if ($actionNav.classList.contains('show')) {
        $actionNav.classList.remove('show')
        $overlay.classList.remove('show')
      } else {
        $actionNav.classList.add('show')
        $overlay.classList.add('show')
      }
    
      event.preventDefault()
    }
    
    Array.from(
      document.querySelectorAll('.container .dropbtn')
    ).forEach($button => $button.addEventListener('click', toggleMenu))
    
    document
      .getElementById('add_article')
      .addEventListener('click', () => {
        const newArtcile = '<div>...</div>'
    
        container.insertAdjacentHTML('afterbegin', newArtcile)
        
        container
          .querySelector('.dropbtn')
          .addEventListener('click', toggleMenu)
      })
    
  • Use event delegation, i.e. listen to a click event on a common ancestor element (the ‘.container’ element would be a good candidate here), and check if the event target is a dropdown button:

    const $overlay = document.getElementById('overlay')
    const container = document.querySelector('.container')
    
    const toggleMenu = button => {
      const $actionNav = button.nextElementSibling
    
      if ($actionNav.classList.contains('show')) {
        $actionNav.classList.remove('show')
        $overlay.classList.remove('show')
      } else {
        $actionNav.classList.add('show')
        $overlay.classList.add('show')
      }
    }
    
    container.addEventListener('click', event => {
      if (event.target.classList.contains('.dropbtn')) {
        toggleMenu(event.target)
        event.preventDefault()
      }
    })
    

BTW why do you have that mix of jQuery and vanilla JS in your code? If possible, I’d go with vanilla JS only (or use jQuery throughout so that it’s at least not wasted bandwidth).

1 Like

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.