Javascript funktioniert nicht nach jQuery ajax Anfrage

Ich erstelle einen dynamischen Inhalt von einer API mit jQuery Ajax-Funktion.Javascript funktioniert nicht nach jQuery ajax Anfrage

Mein Code ist unten

jQuery.ajax({ 
 
\t \t url : "api_url", 
 
\t \t type: "POST", 
 
\t \t dataType : "application/json; charset=utf-8", 
 
\t \t contentType: "application/json; charset=utf-8", 
 
\t \t data : JSON.stringify(myData), 
 
\t \t success: function(data, textStatus, jqXHR) 
 
\t \t { 
 
\t \t \t result_data = JSON.parse(data); 
 
\t \t \t 
 
\t \t \t console.log("result data: "); 
 
\t \t \t console.log(result_data); 
 
\t \t \t console.log(textStatus); 
 
\t \t \t console.log("Data : "); 
 
\t \t \t console.log(data); 
 
\t \t \t console.log(jqXHR); 
 
\t \t \t 
 
\t \t \t 
 
\t \t \t jQuery('.booking-list').append('<li><a class="booking-item" href="#"><div class="row"><div class="col-md-3"><div class="booking-item-car-img"><img src="img/insurance-companies/interlife.jpg" alt="Image Alternative text" title="Image Title"/><p class="booking-item-car-title">Σύνολο Καλύψεων : 1</p></div></div><div class="col-md-6"><div class="row"><div class="col-md-6"><ul class="booking-item-features booking-item-features-small clearfix"><li rel="tooltip" data-placement="top" title="Αστική Ευθύνη Έναντι Τρίτων"><i class="fa fa-male"></i><span class="booking-item-feature-sign"></span></li><li rel="tooltip" data-placement="top" title="Θραύση κρυστάλλων σε Α κίνδυνο έως 1.000€"><i class="im im-car-window"></i><span class="booking-item-feature-sign"></span></li><li rel="tooltip" data-placement="top" title="Οδική Βοήθεια"><i class="fa fa-truck"></i><span class="booking-item-feature-sign"></span></li></ul></div><div class="col-md-6"><div class="checkbox"><label><input class="i-check" type="checkbox"/>Οδική Βοήθεια</label></div><div class="checkbox"><label><input class="i-check" type="checkbox"/>Θραύση Κρυστάλλων</label></div></div></div></div><div class="col-md-3"><span class="booking-item-price">&euro;51,02</span><span></span><p class="booking-item-flight-class">Basic Simple</p><span class="btn btn-primary">Αγορά</span></div></div></a></li>'); 
 
\t \t \t 
 
\t \t }, 
 
\t \t error: function (jqXHR, textStatus, errorThrown) 
 
\t \t { 
 
\t \t \t console.log(jqXHR); 
 
\t \t \t console.log(textStatus); 
 
\t \t \t console.log(errorThrown); 
 
\t \t \t 
 
\t \t \t jQuery('.booking-list').append('<li><a class="booking-item" href="#"><div class="row"><div class="col-md-3"><div class="booking-item-car-img"><img src="img/insurance-companies/interlife.jpg" alt="Image Alternative text" title="Image Title"/><p class="booking-item-car-title">Σύνολο Καλύψεων : 1</p></div></div><div class="col-md-6"><div class="row"><div class="col-md-6"><ul class="booking-item-features booking-item-features-small clearfix"><li rel="tooltip" data-placement="top" title="Αστική Ευθύνη Έναντι Τρίτων"><i class="fa fa-male"></i><span class="booking-item-feature-sign"></span></li><li rel="tooltip" data-placement="top" title="Θραύση κρυστάλλων σε Α κίνδυνο έως 1.000€"><i class="im im-car-window"></i><span class="booking-item-feature-sign"></span></li><li rel="tooltip" data-placement="top" title="Οδική Βοήθεια"><i class="fa fa-truck"></i><span class="booking-item-feature-sign"></span></li></ul></div><div class="col-md-6"><div class="checkbox"><label><input class="i-check" type="checkbox"/>Οδική Βοήθεια</label></div><div class="checkbox"><label><input class="i-check" type="checkbox"/>Θραύση Κρυστάλλων</label></div></div></div></div><div class="col-md-3"><span class="booking-item-price">&euro;51,02</span><span></span><p class="booking-item-flight-class">Basic Simple</p><span class="btn btn-primary">Αγορά</span></div></div></a></li>'); 
 
\t \t } 
 
\t });

Das Problem ist, dass nach dem Erfolg der HTML-Klassen erfolgt Effekt Arent nehmen.

Der erste Punkt auf dem Bild ist vor dem Ajax-Anforderung (manuell auf HTML-Code geschrieben) und die zweite eine .append nach Ajax-Erfolg.

Das Kontrollkästchen auf dem zweiten Element hat nicht die Klasse 'Styling und Effekte.

Wie kann ich dieses Problem beheben?

Quelle

2016-05-10 Christos Kesisis

Verwenden Sie eine bestimmte Bibliotheken (CSS/JS), um Ihre Checkbox zu gestalten? Vielleicht müssen Sie die Javascript-Funktion, die Ihre Checkboxen stilisiert, zurücksetzen/neu starten. , da dom aktualisiert wird, aber das Ereignis onDomReady nach einer dom-Änderung/-Einfügung nicht erneut angewendet wird. –

Ja, ich verwende spezielle Bibliotheken. Aber ich kann nicht verstehen, warum nicht arbeiten. Ich habe alle Dateien vor dem schließenden Body-Tag geladen. Wenn ich die Seite neu lade, funktioniert der erste Teil gut. Die API gibt einen Rückruf in etwa 3-4 Sekunden und wenn ich die Daten mit .append rendern die Bibliotheken nicht funktionieren. Wie kann ich diese Bibliotheken wieder herstellen? –

Welche Bibliothek verwenden Sie, um das Kontrollkästchen zu erweitern? Ich möchte ein "falsches" Kontrollkästchen erstellen. Ist das etwas, das auch die Eingabe, die Auswahl verbessert? Wenn du das nur teilen könntest, kann ich dir helfen! –

Was Sie nach dem Erfolg anhängen möchten, sollte bereits in Ihrer HTML-Vorlage sein. Verwenden Sie CSS-Eigenschaft und jQuery hide() und show() Funktionen.

Es kann Ihr Problem lösen. Selbst wenn dies nicht der Fall ist, sollten Sie es trotzdem tun: Es ist einfacher zu lesen und leichter zu warten.

Quelle

2016-05-10 10:13:31 arzhed

Der Grund, dass ich den ersten Teil auf der HTML-Seite habe, dient nur zur Anzeige. Ich möchte Daten von dieser Anfrage erhalten und sie anschließend an ein bestimmtes div anhängen. –

Javascript funktioniert nicht nach jQuery ajax Anfrage

Antwort

Verwandte Themen