使用API​​请求时不会触发事件

Question

我正在尝试使用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));

Answer 1

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