Scripts in jQuery.ajax läuft () geladen Seiten laufen document.ready zu früh

Question

Meine Website wurde mit jquery.load() Navigation auf einem großen Teil der Seite zu tun. Ich schätze wirklich die Fähigkeit, nur ist nur einen bestimmten Teil des geladenen Inhalts, hier die div mit id = „content“:

$(frame_selector).load(url +" #content", function(response, status, xhr) {...});

Aber jetzt muss ich in der Lage sein, Skripts ausführen, die dynamisch geladenen Teil der Seiten sind zu werden. Jquery.load() streift diese Skripte, aber jquery.ajax() nicht. Also habe ich die Teil Inhalt Funktionalität von jquery.load in einer Ajax-Aufruf als solche dupliziert:

$.ajax({
  url: url,
  dataType: 'html', 
  success: function(data, textStatus, XMLHttpRequest) {
      // Only include the response within the #content id element.
      $(frame_selector).html( jQuery("<div>")
            .append(data)
            .find("#content")
      );
  }
});

Das Problem ist, dass der Skripte, die dynamisch aus dem Ajax-Aufruf geladen wird, wird nicht zuverlässig ausgeführt werden. Manchmal scheinen sie keine Wirkung zu haben, vielleicht weil sie zu früh laufen lassen. Die Skripte werden dabei nur die DOM-Manipulation in jquery - unter Berufung nicht auf Bilder oder Flash oder etwas, das angeblich ist noch nicht geladen werden. Um zu verhindern, stecken zu bleiben Ich habe diese abscheuliche Hack, um Dinge zu arbeiten. Anstelle des AJAX-loaded Skript nur mit:

$(document).ready( function() {...} );  // unreliable

ich verzögern das Skript 200ms vor dem Ausführen:

$(document).ready( window.setTimeout( function() {...}, 200 )); // HATE THIS

Jeder weiß, wie ich diese Arbeit zuverlässig und ohne Hartcodierung eine Verzögerung machen? Ich vermute, es ist eine Racebedingung zwischen den <script> und meiner Logik Last #content in ein neues div, aber ich bin nicht sicher, was zu tun ist.

Answer 1

Ich gehe davon aus die Skripte tun Manipulation auf die DOM-Elemente Sie durch AJAX hinzufügen.

jQuery hat eine isReady Eigenschaft, dass es setzt, sobald das ready Ereignis auf der Seite ausgelöst wurde.

Alle nachfolgenden Aufrufe jQuery.ready(...) werden erste isReady Flagge überprüfen. Wenn das Flag auf true gesetzt ist, wird es den Handler sofort anrufen. Sie können sehen, warum diese Probleme im Code verursachen würde.

Eine Option wäre die Antwort in ein jQuery-Fragment zu laden und später alle der <script /> Tags für die Ausführung parsen.

var ajaxResponse = $(html);
var scripts = ajaxResponse.find('script');

// Move your scripts into a new element
var tempScripts = $().append(scripts);

// Append your content, followed by your script tags
$(document).append(ajaxResponse);
$(document).append(tempScripts);

Answer 2

hat @ Dan die Antwort. Beim Laden Skripte über Ajax das Dokument isReady wahr ist. Dies bedeutet, wenn dies ist der Skript-Tag, die von Ihrem Ajax-Request angefordert wird:

<script type="text/javascript">
    if (jQuery.isReady) {
        $('body').append("<div id='new_content'>Document Ready</div>");
    }
    else {
        $('body').append("<div id='new_content'>Document Not Ready</div>");
    }
</script>

Statt Parsing JSON verwenden. Eine Eigenschaft wird HTML halten. Eine weitere Eigenschaft wird die Skripte halten.

Dann können Sie dies tun:

$(document).append(ajaxResponse.html);
$(document).append(ajaxResponse.script);

Auch wenn Sie Skripte mit der Ready-Funktion umgeben Sie Code laden wird es einen Verschluss erstellen. dieser Verschluss wird die Lebensdauer der Seite dauern. Speicherlecks werden jedes Mal, wenn Sie das Skript anfordern erstellt werden, ohne dass Ihre Seite zu aktualisieren