Question

我正在网上音乐商店工作。有像myplaylists，mydownloads等按钮...... 单击这些按钮时，歌曲列表会相应地显示在网格视图中问题是，当我快速点击按钮两次时，列表会出现两次，如1..4..8 1..4..8，如果我快速点击三次，则会发生三次。显示列表的功能使用append（）将歌曲添加到列表中这些事情只发生在firefox上

我无法弄清楚问题。

function fillMyMusicSongGrid
{
// code to fetch data from the database
embedSongGrid(.....);//displays the grid
}

embedSongGrid(.....)
{
  //displays the grid
tableContent = '...............'
$(tableCont).appendTo('table#songList');
}

Answer 1

如果我正确猜测，按下这些按钮会使Ajax回调服务器以获取信息，可能是作为JSON数组。然后，您将这些和append()循环到相应的div。或者你得到HTML并且只是追加它。

简单解决方案：在添加之前只需empty()：

$.ajax({
  ...
  success: function(data) {
    $("#songlist").empty();
    for (song in data) {
      $("#songlist").append(...);
    }
  }
});

或

$.ajax({
  ...
  success: function(html) {
    $("#songlist").html(html);
  }
});

Answer 2

尝试

$(tableCont).empty();
$(tableCont).appendTo('table#songList');

而不是

$(tableCont).appendTo('table#songList');

在Firefox中显示重复记录

2 个答案: