使用FetchContent JS发出警报

I am trying to make the "save" button alert after the click event, but I was unsuccessful.

Perfil.html

• Profile.html is not the main page. It is part of a dashboard.

<li class="nav-item">
  <a class="nav-link" href="#" a-view="infoPessoal" onclick="fetchContent(this)" a-folder="administrativo">
    <i class="fas fa-info-circle"></i>
    <!-- Icones -->
    Informações
  </a>
</li>

<div class="ajax-fullscreenperfil" id="ajax-fullscreenperfilJs">
   <p></p>
</div>
<script>
  let button2 = document.querySelector('form button.btn')
  button2.addEventListener('click', () => {
      alert("Handler for .click() called.")
  })
</script>

Ajax.js

• I used to make the html call on the same page that is the nav-bar.

let content = document.getElementById('ajax-fullscreenperfilJs')

function fetchContent(el) {
    let view = el.getAttribute('a-view')
    let folder = el.getAttribute('a-folder')
    fetch(`../ajax/${folder}/${view}.html`)
        .then(response => {
            let html = response.text()
            return html
        })
        .then(html => {
            console.log(html)
            content.innerHTML = html
        })

}

InfoPessoal.html

• This is the page that will be shown in the prof.html div.

<div class="main-content">
    <div class="perfil-parent">
        <div class="perfil">
            <div class="perfil-img">
                <div class="img">

                </div>
            </div>
            <div class="perfil-form">
                <form>
                    <div class="form-group">
                        <label for="name">Nome Completo:</label>
                        <input type="text" class="form-control" id="name" placeholder="Insira seu nome completo.">
                    </div>
                    <div class="form-group">
                        <label for="email">Email:</label>
                        <input type="email" class="form-control" id="email" placeholder="Insira seu email.">
                    </div>
                    <div class="form-group">
                        <label for="idade">Idade:</label>
                        <input type="text" class="form-control" id="idade" placeholder="Insira sua idade.">
                    </div>
                    <div class="form-group">
                        <label for="corp">Instituição:</label>
                        <input type="text" class="form-control" id="corp" placeholder="Insira sua Instituição ou empresa.">
                    </div>
                    <div class="form-group">
                        <label for="genre">Prioridade de acesso:</label>
                        <select class="form-control" id="genre">
                          <option>Cliente</option>
                          <option>Manutenção</option>
                          <option>Administrador</option>
                        </select>
                    </div>
                    <div class="form-group">
                        <label for="password">Senha:</label>
                        <input type="password" class="form-control" id="password" placeholder="Insira sua senha.">
                    </div>
                    <div class="custom-file">
                        <input type="file" class="custom-file-input" id="customFile">
                        <label class="custom-file-label" for="customFile">Escolher foto</label>
                    </div>

                    <button type="button" class="btn">Salvar</button>
                </form>
            </div>
        </div>
    </div>
</div>

I can correctly run infoPersonal.html view through Ajax, but I can't make clicking on the "Save" button send an alert.

That's probably because you run below code before AJAX response comes back. That means that you are trying to select DOM elements that don't exist yet.

  let button2 = document.querySelector('form button.btn')
  button2.addEventListener('click', () => {
      alert("Handler for .click() called.")
  })

I think the easiest solution would be to wrap the above code inside a function and fire that function in fetch response.

function alertFunc() {
  let button2 = document.querySelector('form button.btn')
  button2.addEventListener('click', () => {
      alert("Handler for .click() called.")
  })
}




function fetchContent(el) {
    let view = el.getAttribute('a-view')
    let folder = el.getAttribute('a-folder')
    fetch(`../ajax/${folder}/${view}.html`)
        .then(response => {
            let html = response.text()
            return html
        })
        .then(html => {
            console.log(html)
            content.innerHTML = html
            alertFunc()  //   <-----  fire it here
        })

}