display of duplicate records in firefox

Question

hi I am working on an online music store. There are buttons like myplaylists, mydownloads etc... On clicking on these buttons, a list of songs appears accordingly in a grid view.
The problem is that when i click on the buttons twice quickly the list appears two times like 1..4..8 1..4..8 and if i click thrice quickly it happens three times.The function that displays the list uses append() to add songs to the list.
These things happen only on firefox

I cannot figure out the problem.

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

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

Answer 1

If I'm guessing correctly, pressing these buttons makes and Ajax call back to the server to get the information, probably as a JSON array. You then loop through these and append() them to the appropriate div. Either that or you get HTML and just append it.

Simply solution: just empty() it before you add it:

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

or

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

Answer 2

Try

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

instead of

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