Erhält AJAX geladenen Inhalt ein "document.ready"?

Gestern hatte ich ein Problem, wo ein .on('click') event-handler war ich die Zuweisung nicht richtig funktioniert. Stellt sich heraus, dass es ist, weil ich versuchte, zu gelten, dass .on('click') vor diesem element gab es in den DOM, denn er war geladen über AJAX, und daher gab es noch nicht, wenn die document.ready() kam.

Ich löste es mit einem peinlichen umgehen, aber meine Frage ist, wenn ich lege eine <script> tag IN ajax geladenen Inhalt und anderen document.ready() innerhalb, dass, wäre das zweite document.ready() analysiert werden, NUR einmal, ajax-content ist fertig geladen? In anderen Worten, tut es Bedenken Sie, dass separat geladene ajax-content zu anderen documentund wenn ja, nicht mit anderen document.ready() innerhalb dieser ajax-geladenen HTML funktioniert, wie ich denke, dass es funktioniert?

Alternativ; was wäre ein besserer Weg, um mit dieser situation umzugehen? (benötigt wird, fügen Sie einen Ereignis-listener, um ein DOM-element, das noch nicht vorhanden ist, auf document.ready())

InformationsquelleAutor der Frage | 2013-11-27

  1. 31

    Deine Frage zu beantworten: Nein, Dokument.bereit wird nicht wieder Feuer, sobald ein ajax-request abgeschlossen ist. (Der Inhalt in ajax wird in das Dokument geladen, so gibt es nicht ein zweites Dokument für die ajax-content).

    Um Ihr problem zu lösen, fügen Sie einfach die Ereignis-listener, um das Element, wo Sie laden die ajax-Inhalte in Sie.
    Zum Beispiel:

    $( "div.ajaxcontent-container" ).on( "click", "#id-of-the-element-in-the-ajax-content", function() {
  console.log($( this ));
});

    Für #id-of-the-element-in-the-ajax-content Sie können jeden Selektor verwenden Sie in $("selector"). Der einzige Unterschied ist, dass nur Elemente unter div.ajaxcontent-container ausgewählt werden.

    Wie es funktioniert:
    Solange div.ajaxcontent-container gibt es alle Elemente (ob Sie jetzt existieren oder erst in der Zukunft), die mit dem selector #id-of-the-element-in-the-ajax-content löst das click-Ereignis.

    InformationsquelleAutor der Antwort nbar

  2. 10

    Javascript in der resultierenden ajax-Aufruf nicht durchgeführt werden (standardmäßig) wegen der Sicherheit. Auch können Sie nicht direkt binden, Veranstaltung auf nicht existierende Elemente.

    Sie kann binden Sie ein Ereignis, um einige Eltern, die nicht existiert, und sagen, es zu überprüfen, ist es Kinder: 

    $(document).ready(function(){
    $(document).on('eventName', '#nonExistingElement', function(){ alert(1); }
    //or:
    $('#existingParent').on('eventName', '#nonExistingElement', function(){ alert(1); }
});

    Immer versuchen, so nah wie möglich an das auslösende element, wie Sie können, wird dies zu verhindern unnessesary sprudelt durch den DOM

    Wenn Sie haben einige seltsame Funktionen geht, die man tun könnte etwas wie diese:

    function bindAllDocReadyThings(){
    $('#nonExistingElement').off().on('eventName', function(){ alert(1); }
    //Note the .off() this time, it removes all other events to set them again
}
$(document).ready(function(){
    bindAllDocReadyThings();
});
$.ajaxComplete(function(){
    bindAllDocReadyThings();
});

    InformationsquelleAutor der Antwort Martijn

  3. 5

    versuchen diese, die nicht arbeiten, weil Sie Ihre Steuern noch nicht erstellt ist und Sie versuchen, legen ein Ereignis, wenn Sie auf das Ereignis es wird funktionieren. lassen Sie mich wissen, wenn Sie irgendwelche Probleme.

    $(document).ready(function(){
    $(document).on('click', '#element', function (evt) {
        alert($(this).val());
    });
});

    InformationsquelleAutor der Antwort Rudresha Parameshappa

  4. 2

    Hier ist die Antwort ein Delegierter Veranstaltung:

    JSFiddle

    JSFiddle - eine Wirklich dynamische

    jQuery

    $(document).ready(function(){
    //Listen for a button within .container to get clicked because .container is not dynamic
    $('.container').on('click', 'input[type="button"]', function(){
        alert($(this).val());
    });

    //we bound the click listener to .container child elements so any buttons inside of it get noticed
    $('.container').append('<input type="button" class="dynamically_added" value="button2">');
    $('.container').append('<input type="button" class="dynamically_added" value="button3">');
    $('.container').append('<input type="button" class="dynamically_added" value="button4">');
    $('.container').append('<input type="button" class="dynamically_added" value="button5">');
});

    HTML

    <div class="container">
    <input type="button" class="dynamically_added" value="button1">
</div>

    InformationsquelleAutor der Antwort MonkeyZeus

  5. 0

    Arbeite ich an einer code-Basis mit einem Freund, der hat eine ähnliche Anforderung. Die Delegierten event handler option ist auf jeden Fall am besten, wenn alle Sie wollen, ist das anfügen von Ereignishandlern. Eine alternative, vor allem, wenn Sie brauchen, um andere DOM-Verarbeitung in Ihrem $(document).ready - Funktion, um den code, den Sie ausführen möchten, die in einem script-element am Ende des Codes. Im Grunde, statt:

    <script type="text/javascript">
  $(document).ready(function() {
    //Your code here
  });
</script>
<!-- rest of dynamically loaded HTML -->

    Tauschen Sie das Skript und den rest der HTML um, so dass Sie haben:

    <!-- rest of dynamically loaded HTML -->
<script type="text/javascript">
  //Your code here
</script>

    Dies zwingt den browser zu Bearbeiten nur Ihre code-sobald es geladen hat jedes andere DOM-element in der dynamisch geladenen HTML. Natürlich bedeutet dies, müssen Sie sicherstellen, dass die eingefügten HTML nicht unbeabsichtigte UI Konsequenzen, die durch die Verwendung von CSS/HTML anstelle von JS. Es ist eine alte Javascript-trick aus den vergangenen Jahren. Als bonus, die Sie nicht brauchen, jQuery für mehr.

    Ich sollte erwähnen, dass in Chrom v34, indem eine zweite $(document).ready Aufruf innerhalb einer <script> tag in der dynamisch geladenen HTML scheint zu warten, für dynamisch geladene DOM zu laden und dann läuft die Funktion wie du Sie beschrieben hast. Ich bin mir nicht sicher, dieses Verhalten ist standard-aber es hat verursacht mir viel Kummer, wenn Sie versuchen zu automatisieren tests mit dieser Art code.

    InformationsquelleAutor der Antwort jeteon

  6. 0

    JQuery, AJAX .load() ist eine eingebaute Funktion für den Umgang mit diesem.
    Anstatt einfach $('div#content').load('such_a_such.url'); Sie sollten auch eine callback-Funktion. JQuery .load () - bietet Platz für die folgenden:

    $('div#content').load('such_a_such.url',
    { data1: "First Data Parameter",
      data2: 2,
      data3: "etc" },
    function(){ $('#span1').text("This function is the equivalent of");
                $('#span2').text("the $(document).ready function.");
    }
 );

    Jedoch, Sie müssen nicht die Daten enthalten, die argument.

    $( "#Ergebnis" ).laden( "ajax/test.html", function() {
    alert( "Last durchgeführt wurde." );
    });

    http://api.jquery.com/load/

    InformationsquelleAutor der Antwort RoboticRenaissance

Schreibe einen Kommentar