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函数中。