jQuery ajax請求后Javascript無法正常工作

Question

我正在使用jQuery ajax函數從API創建動態內容。

我的代碼如下

 jQuery.ajax({ url : "api_url", type: "POST", dataType : "application/json; charset=utf-8", contentType: "application/json; charset=utf-8", data : JSON.stringify(myData), success: function(data, textStatus, jqXHR) { result_data = JSON.parse(data); console.log("result data: "); console.log(result_data); console.log(textStatus); console.log("Data : "); console.log(data); console.log(jqXHR); 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>'); }, error: function (jqXHR, textStatus, errorThrown) { console.log(jqXHR); console.log(textStatus); console.log(errorThrown); 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>'); } }); 

問題是成功發生后，html類不能生效。

圖片上的第一項是在ajax請求之前（以html代碼手動編寫），第二項是ajax成功之后的.append。

第二項上的復選框沒有班級的樣式和效果。

我該如何解決這個問題？

Answer 1

成功后要添加的內容應該已經在HTML模板中。 使用display: none CSS屬性以及jQuery hide()和show()函數。

它可以解決您的問題。 即使不是，您仍然應該這樣做：它更易於閱讀和維護。