javascript - 使用 FetchContent JS 发出警报

Question

我试图在点击事件后让“保存”按钮提醒，但我没有成功。

Perfil.html

• Profile.html 不是主页。它是仪表板的一部分。

<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

• 我曾经在与导航栏相同的页面上进行 html 调用。

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

• 这是将在 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>

我可以通过 Ajax 正确运行 infoPersonal.html View ，但我无法让点击“保存”按钮发送警报。

Answer 1

这可能是因为您在 AJAX 响应返回之前运行了以下代码。这意味着您正在尝试选择尚不存在的 DOM 元素。

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

我认为最简单的解决方案是将上述代码包装在一个函数中，并在获取响应时触发该函数。

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
        })

}