Question

我在.output的父元素中动态创建了元素，这些元素是在on('click')函数中创建的。

$(document).on("click", '#search', function() {   
//Loop crime data array from api request above...
for(var i = 0; i < mapData.length; i++) {

  //Fill in crime data
  var fill = '<div class="row resu"><div class="col-xs-2 number"><h5>'+[i+1]+'</h5></div><div class="col-xs-10"><p class="text-primary">Type of crime: <span class="text-strong">'+mapData[i][0]+'</span></p><p class="text-primary">Location specifics: <span class="text-strong">'+mapData[i][1]+'</span></p></div></div>';

  //add to div
  $('.output').append(fill);  
}
...
.......

但是在功能之外我无法定位我可以应用.resu或.empty()的新.remove()行。每次我点击搜索按钮时，我都希望先清空输出容器div。

如果你去我的笔并按下按钮，你会在该邮政编码区域看到有关犯罪的一些信息。如果你继续按下它，那么相同信息的多个重复将填满它。我怎样才能摆脱那些使用jquery的人？

我的笔： https://codepen.io/anon/pen/xrwXYy

Answer 1

以下是更新DEMO：https://codepen.io/anon/pen/PjPJaZ

isuue是，您在每次请求后向mapData数组添加数据。您还需要在每次请求后重置mapData数组。

function getPolApi(year,month,lat,lng,mapData) {
    $.ajax({
    url : "https://data.police.uk/api/crimes-at-location?date="+year+"-"+month+"&lat="+lat+"&lng="+lng,
    type : "get",
    async: false,
    success : function(data) {
     mapData = [];// Empty the array
      for(var i = 1; i < data.length; i++) {      
            mapData.push([
              data[i]['category'],
              data[i]['location']['street']['name'],
            ]);

           heatmapData.push(new google.maps.LatLng(data[i].location.latitude,data[i].location.longitude));
      }
       //Add results into view

          for(var i = 0; i < mapData.length; i++) {
             var fill = '<div class="row resu"><div class="col-xs-2 number"><h5>'+[i+1]+'</h5></div><div class="col-xs-10"><p class="text-primary">Type of crime: <span class="text-strong">'+mapData[i][0]+'</span></p><p class="text-primary">Location specifics: <span class="text-strong">'+mapData[i][1]+'</span></p></div></div>';
            $('.output').append(fill);

          }//endforloop

          //Move the map into view of the heatmaps
          moveMap(lat,lng);
          //Add the heatmaps
          addHeatMap();
      mapData = [];
      // console.log(mapData);
    },
    error: function(dat) {
       console.log('error');
    }

Answer 2

如果您尝试调用“getCords＆＃39;异步地，您会发现#output实际上是在被补充之前被清除的。因此，getCords或getPolApi。

一定有问题

setTimeout(function(){
    getCords(postcode);
    getPolApi(year,month,lat,lng,mapData);
},3000);

Answer 3

你可以做到

 $('.output').html(fill);

而不是

 $('.output').append(fill);

在这种情况下，无需删除resu

Answer 4

你正在使用output div。

但您错过了mapData变量为空。

每次推动你的ajax成功响应循环。

所以你需要清除mapData可靠的。

为什么我不能用jQuery删除这些div？

4 个答案: