Javascript can't find element by id on html attached from javascript

Question

I am experiencing an issue when trying to simply detect a link button click through javascript.

My nav html is spawned through javascript in this way:

INDEX.HTML:

<div id="nav">
</div>

NAV.HTML:

<div class="nav-wrapper">
    <div class="left-side">
        <div class="nav-link-wrapper">
            <a id="home-button">Home</a>
        </div>
    </div>  
</div>

INDEX.JS:

$.get('/shared/nav.html', function(data) {
    $("#nav").replaceWith(data);
});
window.onload = function() {  

    const button = document.getElementById('home-button');

    button.addEventListener('click', function() {
        console.log("clicked");
    })
}

THe javascript should execute after the html has been replaced and find the a element with "home-button" id, but button is always null for some reason... Any idea?

Thanks.

EDIT:

Tried event delegation with no luck.

INDEX.JS:

$.get('/shared/nav.html', function(data) {
    $("#nav").replaceWith(data);
});
$("#nav").on('click', 'a', function(event) {
    console.log('click.');
});

The rest of the code is identical.

EDIT 2:

Solution: replaceWith(data) in the javascript was removing the "nav" div, making it impossible to use event delegation. I changed from replaceWith to use innerHTML=... and the event delegation worked.

`window.onload` runs when the page is first loaded, not when you update it with `.replaceWith()` — Barmar, Oct 27 '20 at 23:00
Try adding event listener in $.get callback (right after replaceWith). — ahwayakchih, Oct 27 '20 at 23:01
@ScottMarcus Hey, I am running this code through a live server (using VS Code plugin), so it's technically local code. — jackyroo, Oct 27 '20 at 23:07
@ahwayakchih Unfortunately that doesn't work, button is still null. — jackyroo, Oct 27 '20 at 23:09
Use the event delegation method described in the duplicate question. — Barmar, Oct 27 '20 at 23:09
Hey you could also do this if it fits your needs `$("#nav").ready(function(){ let button ... });` — onzinsky, Oct 27 '20 at 23:09
@user2961930 What he said should work as well. You put it inside the function, not after the end of `$.get`, right? — Barmar, Oct 27 '20 at 23:09
@onzinsky That won't work, the ready event for any element is treated the same as `$(document).ready()`. — Barmar, Oct 27 '20 at 23:10
@Barmar thanks for pointing that out, I tried it but it didn't help.I tried using delegation both in the window.onload callback and just after the html replace: no luck. — jackyroo, Oct 27 '20 at 23:15
@Barnar can you explain why this works then? https://jsfiddle.net/z83qjunh/ I am genuinely interested — onzinsky, Oct 27 '20 at 23:26
@onzinsky I corrected it for you. https://jsfiddle.net/Lwjqy4s3/ — jackyroo, Oct 27 '20 at 23:29
I don't know what you corrected. What I posted works as I expected — onzinsky, Oct 27 '20 at 23:30
@Barmar I've updated the code with the event delegation on the nav div a elements. — jackyroo, Oct 27 '20 at 23:30
@onzinsky The div was outside of the nav div, so technically it wasn't replaced. — jackyroo, Oct 27 '20 at 23:31
@user2961930 The div outside the nav had nothing to do with it. I just added it to check if the onclick was working — onzinsky, Oct 27 '20 at 23:31
@onzinsky That wasn't really an issue, but it's a bit different from what I am doing here. You are spawning html code through the event, I need to bind the event to already generated html code. — jackyroo, Oct 27 '20 at 23:32
@user2961930 in my example, the nav gets replaced with a div with id `home-button`. Ater that is ready, a click event is bind to it. I thought that was what you needed. Either way I'm leaving so wiser people can help you :) — onzinsky, Oct 27 '20 at 23:35
@onzinsky Didn't mean to offend, I misread the code indeed I admitted it and apologized. Unfortunately your solution didn't work. — jackyroo, Oct 27 '20 at 23:39
@Barmar I fixed it. I used innerHTML instead of replacewith, since replacewith was removing the nav div.. — jackyroo, Oct 27 '20 at 23:44

Javascript can't find element by id on html attached from javascript

0 Answers0