Ajax過濾器不能正常工作

Question

我在我的網站上使用AJAX創建了一個過濾器。當我在間隔上使用click事件調用AJAX時，過濾器工作正常。但是當我同時單擊提交按鈕多次時，在我的頁面上反覆出現的結果。我沒有給出這裏的全部細節。

我將結果追加到div計數的基礎上。這是我想的問題。

if ($("#holiday-list-loaded-view-start").nextAll("div").first().hasClass('hotel-list-view')) { 
    $(".hotel-list-view").last().after('<div class="hotel-list-view"><div class="wrapper"><div class="col-md-4 col-sm-6 switch-img clear-padding"><a href="'+base_url+'package_detail/view_detail/'+value["id"]+'"><img src="'+img+'"alt="cruise"></a></div><div class="col-md-6 col-sm-6 hotel-info"><div><div class="hotel-header"><h5>'+value["package_name"].substr(0,120)+'<!--<span><i class="fa fa-star colored"></i><i class="fa fa-star colored"></i><i class="fa fa-star colored"></i><i class="fa fa-star colored"></i><i class="fa fa-star-o colored"></i></span>--></h5><p class="small"><i class="fa fa-map-marker"></i>'+shortest_itinerary+'&nbsp<span id="packagepopup'+value['id']+'" class="package_modal_details" ><i class="fa fa-info-circle" title="View Details" ></i></span><!--<i class="fa fa-phone"></i>123456789--></p></div><div class="hotel-header"><p>Inclusions</p></div><div class="hotel-desc"><p>'+inclusions+'</p></div><!--<div class="hotel-header"><p>Themes</p></div><div class="hotel-desc"><p>'+themes+'</p></div>--></div></div><div class="clearfix visible-sm-block"></div><div class="col-md-2 rating-price-box text-center clear-padding"><div class="rating-box"><div class=""><strong>Themes</strong></div><div class="small">'+themes+'</div></div><div class="room-book-box"><div class="price"><h5>Rs '+value["package_price"]+'/Person</h5></div><div class="book"><a href="#" class="send_package_query" id="packagequery'+value["id"]+'" title="Send a Query">QUERY</a><a href="'+base_url+'package_detail/view_detail/'+value["id"]+'" title="View Detail">DETAIL</a></div></div></div></div></div>'); 
} else { 
    $("#holiday-list-loaded-view-start").after('<div class="hotel-list-view"><div class="wrapper"><div class="col-md-4 col-sm-6 switch-img clear-padding"><a href="'+base_url+'package_detail/view_detail/'+value["id"]+'"><img src="'+img+'"alt="cruise"></a></div><div class="col-md-6 col-sm-6 hotel-info"><div><div class="hotel-header"><h5>'+value["package_name"].substr(0,120)+'<!--<span><i class="fa fa-star colored"></i><i class="fa fa-star colored"></i><i class="fa fa-star colored"></i><i class="fa fa-star colored"></i><i class="fa fa-star-o colored"></i></span>--></h5><p class="small"><i class="fa fa-map-marker"></i>'+shortest_itinerary+'<span id="packagepopup'+value['id']+'" class="package_modal_details" ><i class="fa fa-info-circle" title="View Details" ></i></span><!--<i class="fa fa-phone"></i>123456789--></p></div><div class="hotel-header"><p>Inclusions</p></div><div class="hotel-desc"><p>'+inclusions+'</p></div><!--<div class="hotel-header"><p>Themes</p></div><div class="hotel-desc"><p>'+themes+'</p></div>--></div></div><div class="clearfix visible-sm-block"></div><div class="col-md-2 rating-price-box text-center clear-padding"><div class="rating-box"><div class=""><strong>Themes</strong></div><div class="small">'+themes+'</div></div><div class="room-book-box"><div class="price"><h5>Rs '+value["package_price"]+'/Person</h5></div><div class="book"> <a href="#" class="send_package_query" id="packagequery'+value["id"]+'" title="Send a Query">QUERY</a><a href="'+base_url+'package_detail/view_detail/'+value["id"]+'" title="View Detail">DETAIL</a></div></div></div></div></div>'); 
} 

哦，是我把它當頁面呈現。它需要時間的意思，而如果另一個過濾事件發生那麼它的結果也附加到同一塊由於div元素的匹配不當爲此結果重複。

但如何解決它。我不知道。

Answer 1

然後利用empty()功能清除以前的結果（可能的地方是循環開始之前），

//this will erase previous result 
$(".hotel-list-view").empty(); 
// or 
$("#holiday-list-loaded-view-start").empty(); 
// then append function may be before/after/append