Funktion in Ajax ist nicht definiert

Question

Ich habe ein Div Element mit einem Button darin.

<div id="dynamicContent">
    <button onclick="getDescription()">Beschreibung</button>
</div>

Wenn ich auf den Button klicke wird mit Javascript und Ajax dynamisch eine Seite geladen und das ganze Element (samt Button) durch den Inhalt des neu geladenen HTML ersetzt.

function getDescription() {
    $.ajax({
        url: "ajax.php",
        type: 'GET',
        success: function(res) {
            document.getElementById("dynamicContent").innerHTML = res;
        }
    });
}

In dem dynamischen HTML ist auch ein Button der den Inhalt nochmal ändern soll.

<script>
function test() {
    document.getElementById("item").textContent = "Eine weitere Beschreibung";
}
</script>

<div id="item">
Hier steht eine Beschreibung.
<button id="testButton" onclick="test()">mehr anzeigen</button>
<div>

Wenn ich das ganze teste wird zwar der Inhalt geladen und angezeigt wenn ich aber den Button im neu geladenen HTML anklicke ist die Funktion test nicht definiert.

Uncaught ReferenceError: test is not defined
    onclick http://localhost/:1

Answer 1

Die einfachste Lösung wäre wenn du die Funktion test() im Hauptdokument selbst definierst.