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()函数。

它可以解决您的问题。 即使不是，您仍然应该这样做：它更易于阅读和维护。