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

它可以解决您的问题。即使它没有，你仍然应该这样做：它更容易阅读，更容易维护。