Ausführen von Über AJAX eingefügte Elemente</strong></p> <p>In bestimmten Szenarien kann ein AJAX-Aufruf Inhalte abrufen, die <script> Tags. Der Skriptcode in diesen Tags kann jedoch möglicherweise nicht ausgeführt werden, nachdem er in das DOM eingefügt wurde.</p> <p><strong>Problemerklärung:</strong></p> <p>Bedenken Sie die folgende HTML-Struktur:</p> <div class="code" style="position:relative; padding:0px; margin:0px;"><div class="code" style="position:relative; padding:0px; margin:0px;"><pre><div></pre><div class="contentsignin">Nach dem Login kopieren</div></div><div class="contentsignin">Nach dem Login kopieren</div></div> <p>Eine AJAX-Anfrage wird gestellt, um das „Content“-Div mit Daten aus einer PHP-Datei zu füllen. Angenommen, die PHP-Antwort enthält den folgenden Code:</p> <div class="code" style="position:relative; padding:0px; margin:0px;"><div class="code" style="position:relative; padding:0px; margin:0px;"><pre><div></pre><div class="contentsignin">Nach dem Login kopieren</div></div><div class="contentsignin">Nach dem Login kopieren</div></div> <p>Nachdem die AJAX-Anfrage abgeschlossen ist, wird das injizierte <script> Das Tag wird möglicherweise nicht ausgeführt, da zum Zeitpunkt des Einfügens kein Zugriff auf das DOM besteht.</p> <p><strong>Lösung:</strong></p> <p>Um das injizierte <script> Code kann man die folgende JavaScript-Technik verwenden:</p> <div class="code" style="position:relative; padding:0px; margin:0px;"><pre>var arr = MyDiv.getElementsByTagName('script'); for (var n = 0; n < arr.length; n++) eval(arr[n].innerHTML);//run script inside div</pre><div class="contentsignin">Nach dem Login kopieren</div></div> <p>Dieser Code ruft alle <script> Elemente innerhalb des angegebenen div und wertet deren innerHTML aus, wodurch der darin enthaltene Code effektiv ausgeführt wird.</p>