时间戳

首页 > 解决方案 > 使用 FetchContent JS 发出警报

javascript - 使用 FetchContent JS 发出警报

问题描述

我试图在单击事件后使“保存”按钮警报，但我没有成功。

Perfil.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

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

<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 视图，但我无法单击“保存”按钮发送警报。

标签： javascriptjqueryhtmlcssajax

解决方案

这可能是因为您在 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
        })

}

推荐阅读