0

I use a code for loading HTML into a div-container. The goal is to have a single page application. Now I want to use the loaded content and sometimes change texts or designs. At the moment it doesn't work as I want.

One of three parts shows the most important part I think:

Router.prototype = {
    routes: undefined,
    rootElem: undefined,
    constructor: function (routes) {
        this.routes = routes;
        this.rootElem = document.getElementById('app');
    },
    init: function () {
        var r = this.routes;
        (function(scope, r) { 
            window.addEventListener('hashchange', function (e) {
                scope.hasChanged(scope, r);
            });
        })(this, r);
        this.hasChanged(this, r);
    },
    hasChanged: function(scope, r){
        if (window.location.hash.length > 0) {
            for (var i = 0, length = r.length; i < length; i++) {
                var route = r[i];
                if(route.isActiveRoute(window.location.hash.substr(1))) {
                    scope.goToRoute(route.htmlName);
                }
            }
        } else {
            for (var i = 0, length = r.length; i < length; i++) {
                var route = r[i];
                if(route.default) {
                    scope.goToRoute(route.htmlName);
                }
            }
        }
    },
    goToRoute: function (htmlName) {
        (function(scope) { 
            var url = 'views/' + htmlName,
                xhttp = new XMLHttpRequest();
            xhttp.onreadystatechange = function () {
                if (this.readyState === 4 && this.status === 200) {
                    scope.rootElem.innerHTML = this.responseText;
                }
            };
            xhttp.open('GET', url, true);
            xhttp.send();
        })(this);
    }
};

At the end you can see xhttp.open('GET'...). Because this is code I took from a tutorial I don't want to mess around with it, but select loaded elements in a separate script. I have a page with a container having the ID 'app'. The files loaded are html like about.php

<div><h1 id="abt">About</h1></div>
<a href="#list">List</a>

Because I want to select them in an extra file I don't like to use a script like the following 

  $(document).on("load", function() {
    ChangeTextFunction();
  });

Instead, I want to learn how I can select the elements from the request mentioned above in an extra file, a separate request. E.g. $('#abt').text("Hello");

Is it somehow possible? Thanks in advance.

nucky
  • 348
  • 5
  • 15
  • 1
    Selectors and event handlers specified at page load will only match elements which exist at page load. You are adding new elements *after* page load, so any selectors defined on page load will not match them - jQuery doesn't know about those new elements. You need to specify the selector after the new content is loaded, or when you're trying to use it, eg https://stackoverflow.com/questions/18698842/jquery-selector-on-dynamically-added-element, https://stackoverflow.com/questions/1359018/how-do-i-attach-events-to-dynamic-html-elements-with-jquery – Don't Panic Apr 24 '20 at 01:10
  • The key search terms are "dynamic elements", if you want to read more. – Don't Panic Apr 24 '20 at 01:11
  • 1
    @Don'tPanic has the right idea, though you can get around things a bit by specifying selectors and/or event handlers on a parent that _does_ exist and going down from there. This can be done with event delegation [see here on the jQuery site](https://learn.jquery.com/events/handling-events/#binding-events-to-elements-that-don-39-t-exist-yet). Similarly for selectors, I believe you'd be safe to select an existing parent and then use find() to get to the element added later. –  Apr 24 '20 at 01:42
  • Okay. Then I may need one more answer. I try around with delegations etc. Doesn't $(window).on(load) not execute inside an if? Maybe because if will be executed when the document is ready? I have a function that doesn't work as expected inside the if watching for the right hash, adding elements to dynamic html, standing alone inside window on load makes it work as expected. – nucky Apr 24 '20 at 22:32

0 Answers0