HTML 使用 JavaScript 获取的组件不响应单击事件

Question

我有一个 HTML 组件，当用户单击按钮时会获取该组件。此 component/modal 用于更改用户的个人资料图像（这是使用 PHP 处理的）。 JavaScript fetch() 发生在以下代码中：

var newProfileImageButton = document.getElementById('replace-profile-photo'),
    changeProfileImageWrapper = document.getElementById('change-profile-image-wrapper'),
    profileImageModalPath = "modals/change-profile-image.php";

newProfileImageButton.addEventListener('click', function(){

    fetch(profileImageModalPath)
        .then((response) => {
            return response.text();
        })
        .then((component)=>{
            changeProfileImageWrapper.innerHTML = component;
        })
        .catch((error => {console.log(error)}))

})

这个获取的组件包含一个 'close' 按钮，如果用户希望关闭模式而不更新他们的个人资料图片。

当我点击关闭按钮时没有任何反应。我有下面的脚本 - 这个问题与 Javascript 在获取 component/modal 之前加载的事实有关吗？如果是这样，我该如何解决？我想我可以为这个组件关闭和打开 display:none，但如果可能的话我更愿意获取它。

注意：该按钮正在响应 CSS 悬停事件，因此我确信这不是 HTML / CSS 标记问题。

// close button is part of the HTML component that is fetched 
var closeComponent = document.getElementById('form-close-x')

if (closeComponent) {
    closeComponent.addEventListener('click', function(){
         
        // Hide the main component wrapper so component disappears
        changeProfileImageWrapper.style.display = 'none';

    })
}

我也试过使用下面的代码，我在类似的问题中找到了它，但这也不起作用（有人建议这是一个重复的问题）。

var closeComponent = document.getElementById('form-close-x')

if (closeComponent) {
    closeComponent.addEventListener('click', function(e){

        if (e.target.id == 'form-close-x') {
            changeProfileImageWrapper.style.display = 'none';
        }
    })
}

Answer 1

试试这个：

// var closeComponent = document.getElementById('form-close-x') <-- remove
// if (closeComponent) { <-- remove
    document.addEventListener('click', function(e){
        if (e.target.id === 'form-close-x') {
            changeProfileImageWrapper.style.display = 'none';
        }
    })
//} <-- remove

HTML 使用 JavaScript 获取的组件不响应单击事件

HTML Component That Is Fetched With JavaScript Not Responding To Click Event

html

javascript

fetch

dom-events