时间戳

首页 > 解决方案 > 处理 API 请求时不会触发事件

javascript - 处理 API 请求时不会触发事件

问题描述

我正在尝试使用 addEvent 侦听器在我的表单输入中获取提交的值，但没有任何事件起作用。事件仅在我评论我的 API 请求代码块时触发。你能帮忙找出这个错误吗？这是我的代码：

import Api from './api';
const apiConfig  = require ("../config.json");

// Dom queries
const searchForm = document.getElementById('search');
const submit = document.querySelector('button');

submit.addEventListener('click', e =>{
    console.log("hello");
});

searchForm.addEventListener('submit', e => {
    e.preventDefault();
    console.log("hello");
})


const updateUi = imageUrl => {
    let template = `<img src="${imageUrl}">`;
    document.body.innerHTML += template;
};


const getTrending =  new Api('http://api.giphy.com/v1/gifs/trending', {api_key: apiConfig.apiKey});
const data = getTrending.makeRequest();
data.then( data => {
    var responseData = data.data;
    responseData.forEach( gifdata => {
        const gifUrl = gifdata.images.original.url;
        updateUi(gifUrl);
    })}
).catch( err => console.log(err));

标签： javascriptdom-events

解决方案

最后！我发现了错误。我正在用 api 数据替换 body 的 innerhtml。此外，我在我体内添加了一个事件侦听器的输入也被 API 数据替换。所以no element === no event。但是我发现奇怪的是，如果我在成功的 Api 请求后替换了我身体的全部内部 html，那么为什么输入字段仍然可见？这个错误花了我几个小时才弄清楚为什么我会遇到这个问题。很高兴我修好了它！

推荐阅读