Eventlistener in dynamisch geladenem Ajax Inhalt

lima-city: Webhosting, Domains und Cloud
0 Pluspunkte 0 Minuspunkte

Ich habe dieses Script

<html>
<script>
function loadContent() {

    var cont = document.getElementById('dynamicContent');

    $.ajax({
        url: "https://example.com/api",
        type: 'GET',
        success: function(res) {
            cont.innerHTML = res;
        }
    });

}
</script>

<div>
    <div id="dynamicContent"></div>
    <button onclick="loadContent()">Klick</button>
</div>

</html>

Die Datei inc.php sieht so aus:

<html>
<script>
window.addEventListener("load", function(event) {
    console.log("Diese Funktion wird nach 2000 Millisekunden automatisch aufgerufen.");
});
</script>

<p>Hello world</p>
</html>

Wieso wird der eventlistener im Ajax Inhalt nicht aufgerufen?

von  

1 Antwort

0 Pluspunkte 0 Minuspunkte

Wenn du Inhalte per AJAX in die Seite lädst, wird das "load" Ereignis für das Fenster bereits beim Anzeigen der Seite ausgelöst, bevor der neue Inhalt geladen und hinzugefügt wird. Daher wird der EventListener im neu geladenen Inhalt nicht erneut aufgerufen. Du kannst den Eventlistener im neu geladenen Inhalt weglassen

<script>
console.log("Diese Funktion wird nach 2000 Millisekunden automatisch aufgerufen.");
</script>

<p>Hello world</p>

und das Javascript darin explizit aufrufen.

...
cont.innerHTML = res;

// Extrahiere und führe den JavaScript-Code aus
var scriptTag = cont.querySelector('script');
if (scriptTag) {
    eval(scriptTag.innerHTML);
}
von (675 Punkte)  

Ähnliche Fragen