Ajax請求存儲舊數據

Question

我的ajax請求有一個小問題，但尚未找到解決方案。

我要完成的工作：

我有一個簡單的搜索表單，當我提交時，我將數據發送到一個PHP文件，該文件將結果作為json返回。 然后，我將返回的數據添加到可單擊的列表中，當我單擊一個列表項時，我想在新的div中顯示數據。 這實際上工作正常。 即使我開始新的搜索，我也會得到正確的json對象，並且列表會按預期更新，但現在出現以下問題。 如果我在不刷新整個頁面的情況下開始新搜索，然后再次單擊列表項，那么在控制台日志中，我會看到新數據以及以前的數據仍然存儲在列表中或任何地方，這是問題所在，因為然后如果我單擊列表項，則顯示錯誤的數據。

希望您能理解我的問題，對於每一個提示我都很感謝。 順便說一句，我的方法是否可行，或者有更好的方法來解決這個問題？

JavaScript代碼

$('#searchbar').submit(function(e){
    e.preventDefault();
    var query = $('#searchQuery').val();
    if (query != ''){
        loadData();             
    }else{
        alert('Empty searchform!');
    }
});

function loadData(){
    var query = $('#searchQuery').val();
    $.ajax({
        type: "POST",
        url: "search.php",
        data: {'query': query},
        dataType: 'json'
    }).done(function(res) {
            console.log(res);
            resetInfos();
            generateList(res);
            $('.list-group').on('click', '.list-group-item', function(e){
                var index = $(this).index();
                console.log(res[index].Name);
                $('#locationName').text(res[index].Name);
                $('#locationAddress').text(res[index].Zip
                + ' '
                + res[index].State);
                $('#locationContact').text(res[index].Internet);
                init_map(res[index].Latitude, res[index].Longitude);
            });
        });     
}

function resetInfos(){
    $('.list-group').empty();
    $('#listItems').remove();
    $('#searchQuery').val('');
    $('#locationName').text('');
    $('#locationAddress').text('');
    $('#locationContact').text('');     
}   

function generateList(result){
    $.each(result, function(i){
        $('.list-group').append('<li class="list-group-item" id="listItems">' 
        + result[i].Name 
        + ", " 
        + result[i].Zip 
        + " " 
        + result[i].State);
    }); 
}

HTML搜索表單

      <form id="searchbar">
        <div class="input-group form-group-lg">
          <input type="text" id="searchQuery" name="query" class="form-control" autocomplete="off" placeholder="Name, ZIP, State">
          <span class="input-group-btn"><button class="btn btn-success btn-lg" id="searchButton" type="submit">Search</button></span>
        </div>
      <form>

Answer 1

您正在使用ID選擇器刪除多個元素。

$('#listItems').remove();

它只會刪除第一個匹配的參考。 請在li元素中添加一些類，然后使用類選擇器刪除。

Answer 2

好的，我解決了。 我必須刪除click事件處理程序

$('.list-group').off('click');

在我的resetInfos函數中。