jQuery灯箱从数据库通过PHP/Ajax强制双击第一次

这是一个奇怪的问题。我必须点击某些按钮(有一些id)。id在PHP脚本中通过Ajax传递。在数据库中搜索该id，并将匹配的条目作为数据传递，其中显示在我的jQuery灯箱中。但是，我必须第一次双击按钮。

<div class="boxes">
  <a href="#" id="showe3" class="button lfloat">Show it</a>
</div>
<div class="boxes">
  <a href="#" id="showe4" class="button lfloat">Show it</a>
</div>

Javascript函数是:

$('.button').click( function() {
  $.ajax({
    type: 'POST',                
    url: 'functions/db.php',            
    data: {id: this.id},
    dataType: 'json'
  }).done(function(data) {
    $('#'+data[0]).avgrund({
    //data [0] is both the id being clicked and that stored in the database
      height: 200,
      holderClass: 'custom',
      showClose: true,
      template: '<p>'+data[2]+'</p>' +
        '<div>' +
        '<a href="#" target="_blank" class="b1">'+data[0]+'</a>' +
        '<a href="#" target="_blank" class="b2">'+data[1]+'</a>' +
        '<a href="#" target="_blank" class="b2">More</a>' +
        '</div>'
    });
  });
});

$id = $_POST['id'];
$result = mysql_query("SELECT * FROM `eventdetails` WHERE `id` = '".$id."'");                      
$array = mysql_fetch_row($result);                            
echo json_encode($array);

我在Windows 7上的XAMPP服务器上运行这些文件。我第一次要双击是正常的吗?我该如何改进它?

编辑# 1 一位用户建议在Ajax中使用success而不是done。尽管如此，它还是需要双击。这是在Ajax中使用success的javascript代码。

$('.button').click( function() {
  $.ajax({
    type: 'POST',                
    url: 'functions/db.php',            
    data: {id: this.id},
    dataType: 'json',
    success:(function(data) {
      $('#'+data[0]).avgrund({
        height: 200,
        holderClass: 'custom',
        showClose: true,
        template: '<p>'+data[2]+'</p>' +
          '<div>' +
          '<a href="#" target="_blank" class="b1">'+data[0]+'</a>' +
          '<a href="#" target="_blank" class="b2">'+data[1]+'</a>' +
          '<a href="#" target="_blank" class="b2">More</a>' +
          '</div>'
      });
    })
  });
});