通過AJAX刪除記錄當使用JQuery附加生成表時

Question

我有一個包含數據的html表。我想通過ajax刪除的記錄，但我掙扎點點，因爲我的表與append產生：

 ... 
     $.each(data, function(id, won) { 
           if (data[i].flag == 0) {flag='<img src="../images/flag-y.png" width="20" height="20">'} else {flag='<img src="../images/flag.png" width="20" height="20">'} 

          $el.append('<tr><td>'+data[i].id+'</td> 
    <td><a href="?identifier='+data[i].id+'&token='+data[i].token+'"><img src="../images/edit.png" width="20" height="20"></a></td> 
<td><a href="?delete='+data[i].id+'&deletetoken='+data[i].token+'"><img src="../images/delete.png" width="20" height="20" class="delete"></td> </tr>'); 
           i = ++ i;                      
          }); 
     ... 

它的工作原理。但如何將參數傳遞到ajax調用如果有人點擊圖片到最後一列（我不需要幫助的PHP文件）？

$('a.delete').click(function(e) { 
     e.preventDefault(); 

    var parent = $(this).parent(); 
     $.ajax({ 
      type: 'get', 
      url: 'jquery-record-delete.php', 
      data: 'ajax=?delete, 
      beforeSend: function() { 
       parent.animate({'backgroundColor':'#fb6c6c'},300); 
      }, 
      success: function() { 
       parent.slideUp(300,function() { 
        parent.remove(); 
       }); 
      } 
     }); 

    }); 

我需要傳遞delete和deletetoken變量。

Answer 1

我建議你添加data-id屬性，每個<tr>，像這樣：

$el.append('<tr data-id="+ data[i].id +" data-token="+ data[i].token +"> 
    + '<td>' + data[i].id + '</td>' 
    + '<td>' 
     + '<a href="?identifier=' + data[i].id + '&token=' + data[i].token + '">' 
      + '<img src="../images/edit.png" width="20" height="20">' 
     + '</a>' 
    + '</td>' 
    + '<td>' 
     + '<a href="?delete=' + data[i].id + '&deletetoken=' + data[i].token + '" class="delete">' // also, you listen to a.delete click, so let's add "delete" class to it 
     + '<img src="../images/delete.png" width="20" height="20" class="delete">' 
     + '</a>' // I think you were missing closing a tag here 
    + '</td>' 
+ '</tr>'); 
i++; 

所以，你可以在偵聽器回調輕鬆地抓住它：

$('body').on('click', 'a.delete', function(e) { 
    e.preventDefault(); 

    var tr = $(this).closest('tr'), 
     token = tr.data('token'), 
     id = tr.data('id'); // we have the ID 
    $.ajax({ 
     type: 'get', 
     url: 'jquery-record-delete.php', 
     data: { 
      id: id, // passing id, 
      token: token, 
      ajax: 'delete' 
     }, 
     beforeSend: function() { 
      tr.animate({'backgroundColor':'#fb6c6c'},300); 
     }, 
     success: function() { 
      tr.slideUp(300,function() { 
       tr.remove(); 
      }); 
     } 
    }); 
});