Modal attribute data-modal-target not working when added with Javascript

Question

I have been trying to add dynamically the modal target attribute to a div using javascript, but both setAttribute() method or append() method won't work. Obviously when I write the attribute on the div the modal appears without any problem.

These are my attempts:

<script>
      var build='<div data-modal-target="#modal">MODAL_TEST_DIV<div>';
      $('#divTest').append(build);
</script>

<div id="divTest">TEST</div>

or

document.getElementById("divTest").setAttribute("data-modal-target", "#modal");

It's weird because analysing the divs the attribute is successfully added, but no reaction. Thanks in advance, any help it's really appreciated.

P.s. The code I'm using for the modal is the basic one created by Web Dev Simplified

HTML:

    <div data-modal-target=#modal>OPEN MODAL</div>

    <div class="modal" id="modal">
      <div class="modal-header">
        <div class="title">Example Modal</div>
        <button data-close-button class="close-button">&times;</button>
      </div>
      <div class="modal-body">
        Lorem ipsum dolor sit amet consectetur adipisicing elit. Esse quod alias ut illo doloremque eum ipsum obcaecati distinctio debitis reiciendis quae quia soluta totam doloribus quos nesciunt  repellat sapiente!
      </div>
    </div>
    
    <div id="overlay"></div>

Javascript:

const openModalButtons = document.querySelectorAll('[data-modal-target]')
const closeModalButtons = document.querySelectorAll('[data-close-button]')
const overlay = document.getElementById('overlay')

  openModalButtons.forEach(button => {
    button.addEventListener('click', () => {
      const modal = document.querySelector(button.dataset.modalTarget)
      openModal(modal)
    })
  })

overlay.addEventListener('click', () => {
  const modals = document.querySelectorAll('.modal.active')
  modals.forEach(modal => {
    closeModal(modal)
  })
})

closeModalButtons.forEach(button => {
  button.addEventListener('click', () => {
    const modal = button.closest('.modal')
    closeModal(modal)
  })
})

function openModal(modal) {
  if (modal == null) return
  modal.classList.add('active')
  overlay.classList.add('active')
}

function closeModal(modal) {
  if (modal == null) return
  modal.classList.remove('active')
  overlay.classList.remove('active')
}

question from:https://stackoverflow.com/questions/65832063/modal-attribute-data-modal-target-not-working-when-added-with-javascript

Answer 1

Waitting for answers