jQuery ajaxリクエスト後にJavascriptが機能しない

Question

jQuery ajax関数を使用して、APIから動的コンテンツを作成しています。

私のコードは、問題は、成功が発生した後、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">&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 });

を下回っています。

画像上の最初の項目は、AJAXリクエスト（HTMLコードに書かれた説明書）の前にあり、第二は、Ajax成功後.appendあります。

2番目の項目のチェックボックスは、クラスのスタイリングとエフェクトがありません。

この問題を解決するにはどうすればよいですか？

Answer 1

あなたのHTMLテンプレートには、成功した後に追加したいものがあります。 display: none CSSプロパティとjQuery hide()とshow()関数を使用してください。

これで問題が解決する場合があります。とにかくそれをやるべきではありません。読みやすく、保守が簡単です。