jQuery ajax関数を使用して、APIから動的コンテンツを作成しています。jQuery ajaxリクエスト後にJavascriptが機能しない
私のコードは、問題は、成功が発生した後、HTMLクラスを有効にアレントということです
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">€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">€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 });
を下回っています。
画像上の最初の項目は、AJAXリクエスト(HTMLコードに書かれた説明書)の前にあり、第二は、Ajax成功後.appendあります。
2番目の項目のチェックボックスは、クラスのスタイリングとエフェクトがありません。
この問題を解決するにはどうすればよいですか?
チェックボックスをスタイリッシュにするために特定のライブラリ(CSS/JS)を使用していますか? 多分スタイリッシュなチェックボックスのJavaScript機能をリセット/再起動する必要があります。 domが更新されていますが、DOMの変更/挿入後にonDomReadyイベントが再度適用されないためです。 –
はい、私は特定のライブラリを使用しています。しかし、私はなぜ動作しているのか理解できません。 私は閉じているbodyタグの前にすべてのファイルを読み込みました。ページをリロードすると、最初の部分は正常に動作します。 APIは約3-4秒でコールバックを行い、.appendを使ってデータをレンダリングすると、ライブラリは機能しません。 どうすればこれらのライブラリをリニューアルできますか? –
チェックボックスを拡張するために使用しているライブラリは何ですか? "偽の"チェックボックスを作成するように。それはまた、入力、選択を強化するものですか?あなたがこれを分かち合うことができれば、私はあなたを助けることができます! –