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

Question

I have an HTML component that is fetched when user clicks on a button. This component/modal is used to change a user's profile image (this is processed with PHP). The JavaScript fetch() happens with the following code:

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

})

This fetched component includes a 'close' button should the user wish to close the modal and not update their profile image.

When I click the close button though nothing is happening. I have the script below - is the issue to do with the fact the Javascript has loaded before the component/modal is fetched? And if so how do I fix this? I guess I could just toggle display:none off and on for this component but would prefer to fetch it if possible.

Note: The button is responding to CSS hover events so I'm confident it's not an HTML / CSS markup issue.

// 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';

    })
}

I've also tried using the following code, which I found in a similar question, but this doesn't work either (it was suggested this was a duplicate question).

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

Does this answer your question? [add event listener on elements created dynamically](https://stackoverflow.com/questions/14258787/add-event-listener-on-elements-created-dynamically) — Kinglish, Jun 11 '21 at 22:48
@Kinglish I had a look at that. If I add an event parameter `e` into the click function, when I console log the event target e.g. `console.log(e.target)` I don't get anything showing in the console either? — pjk_ok, Jun 11 '21 at 23:02
with dyn elements and pre-existing listeners, you have to set those listeners to static objects (like body) and then in the callback test for your button - `if (event.target.id == 'form-close-x') ...` — Kinglish, Jun 11 '21 at 23:07
Hi @Kinglish (thanks for spotting the typo). I tried what you suggested (what was in the other question/answer) but it still isn't working. — pjk_ok, Jun 11 '21 at 23:18
Chewy - let me know if you try the answer below and it still doesn't work — Kinglish, Jun 11 '21 at 23:51

score 2 · Accepted Answer · answered Jun 11 '21 at 23:37

2

Try this:

// 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

answered Jun 11 '21 at 23:37

Kinglish

23,358
3
22
43

Hi @Kinglish that did make a difference ! It works now - I don't understand why the if statement and variable declaration prevent it working tho? – pjk_ok Jun 12 '21 at 00:00
1

because when that if statemetn was evaluated, the element you were testing for didn't exist, so the listener was never executed. But even if you had removed the if, it still wouldn't have worked bc you were putting the listener on an object that didn't yet exist. Here, we're putting the listener on document, which does exist at the time we create it. – Kinglish Jun 12 '21 at 00:02
Ah...I understand now. Thanks for your help. – pjk_ok Jun 12 '21 at 00:04

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

1 Answers1