Zugang DOM-Elemente nach ajax.load

Question

Ich bin Einfügen der HTML-Antwort von einem AJAX-Aufruf in meine Seite, aber dann, wenn ich versuche, diese Elemente zuzugreifen, nachdem sie erstellt wurden, ist es nicht ..

Das ist, wie ich abrufen und fügen Sie den HTML:

$.ajax({url: 'output.aspx',
   data: 'id=5', 
   type: 'get', 
   datatype: 'html',
   success: function(outData) {$('#my_container').html(outData);} 
})

Das Ergebnis HTML, die in die <div> eingeführt wird (id = my_container) wie folgt aussieht:

<div id="my_container">
   <ul>
      <li id="578" class="notselected">milk</li>
      <li id="579" class="notselected">ice cream</li>
      <li id="580" class="selected">chewing gum</li>
   </ul>
</div>

... und danach, wenn ich versuche, eine der <li> Elemente zuzugreifen unter Verwendung von Abfragen wie: $('#my_container li:first') oder $('#my_container ul:first-child') oder ähnliches, wird nichts ausgewählt.

Ich bin mit dem Plugin Hören keine Click-Ereignisse auf den <li>elements zu erkennen und es funktioniert ... aber ich kann nicht herausfinden, wie zu erkennen, ob der div mit der Ausgabe HTML bestückt ist und eine entsprechend der Klasse ändert die <li> zum Beispiel ...

$(document).ready nicht funktioniert entweder ...

Stellen Sie sich vor ich brauche die CSS Stil des zweiten <li> zu ändern .. was die Lösung ist das?

Answer 1

Wie werden überprüfen Sie, um zu sehen, ob Ihr AJAX-Aufruf abgeschlossen ist? Weil es asynchron ist, werden die Elemente nicht, natürlich, auf den Code zur Verfügung, die direkt nach dem $.ajax(…) Aufruf ausgeführt wird.

Versuchen Sie, diese Elemente aus der success Funktion oder in anderem Code zu manipulieren, die von dort aus aufgerufen wird - an diesem Punkt, werden Sie wissen, dass der Inhalt verfügbar ist

.

Answer 2

Sind Sie sicher, dass Ihre tatsächliche Anforderung erfolgreich? Wenn nichts ausgewählt ist, wird der höchstwahrscheinliche Grund, dass eigentlich nichts in #my_container an erster Stelle eingefügt wurde.

Answer 3

Versuchen Sie zunächst, den folgenden Code (anstelle des ursprünglichen AJAX rufen Sie zeigen):

var html = $.ajax({url: 'output.aspx',
   data: 'id=5', 
   type: 'get', 
   datatype: 'html',
   async: false
}).responseText;
$('#my_container').html(html);

Wenn das funktioniert, Ihr li:first Selektor gerade angerufen wird, bevor der AJAX-Request beendet. Wenn das nicht funktioniert, versuchen Sie den folgenden Code:

$.ajax({url: 'output.aspx',
   data: 'id=5', 
   type: 'get', 
   datatype: 'html',
   success: function(outData) { $('#my_container').html(outData); }, 
   error: function(errorMsg) { alert('Error occured: ' + errorMsg); }
});

Das wird eine Fehlermeldung verursachen, Pop-up, wenn die Anforderung fehlschlägt. Wenn eine Fehlermeldung mit einer Fehlermeldung angezeigt wird, wird die Anforderung nicht zurück.

Answer 4

es sieht aus wie Sie auf diese Elemente zuzugreifen versuchen, bevor sie ihre erstellt wurde, weil Ihr aktueller Ajax-Aufruf asynchron ist, versuchen Sie die Option setzen: "async = false" auf Ihre Ajax und es sollte Arbeit sein.