顯示記錄，並從數據庫中像這樣刪除

我顯示記錄：顯示記錄，並從數據庫中像這樣刪除

$(document).ready(function(){ 
      $.ajax({ 
       url: 'functions/list-articles-delete.php', 
       dataType: 'json', 
       method: 'POST', 
       success: function(data) { 
       $.each(data, function(item){ 
        var tr_str = "<tr>" 
        + "<td>" + data[item].n_title + "</td>" 
        + "<td>" + data[item].n_dateTime + "</td>" 
        + "<td><button class='btn btn-danger' id='deletebut' data-id='" + data[item].id + "'>Delete</button></td>"; 
        $("#output").append(tr_str); 

        $("#deletebut").on('click', function(){ 
         // display id of associated record 
       }); 
      });   
     }, 
    }); 
});

當我點擊任何我希望它CONSOLE.LOG按鈕（）的id相關的記錄，但不太清楚如何做到這一點？

來源

2017-07-02 Jonathan

不確定你在這裏問的是什麼？你已經使用了ID幾行？ '數據[項目] .id'？ –

當我點擊「刪除」按鈕時，我想讓它到console.log（）該刪除按鈕關聯的特定記錄的ID。 – Jonathan

首先，你不能有多個具有相同'id'值的元素。在html文檔中ID必須是_unique_。 –

您正在給所有的按鈕一樣id。在HTML中，所有id必須是唯一的。

我們實際上可以刪除id，只是改爲使用class。這樣，我們可以同時註冊一個覆蓋所有按鈕的事件。

這裏是我怎麼會這樣：
（閱讀評論的變化的解釋）

// First, register an event on all the buttons that exists, and 
// might be added, that has the class delete-btn. 
// Put this code directly in your document.ready. 

$("body").on('click', ".delete-btn", function() { 
    // Get the data-id value from the button 
    console.log($(this).data('id')); 
}

現在，改變你的循環：

$.each(data, function(index, item) { // The second argument will get the actual item 
    var tr_str = "<tr>" 
    + "<td>" + item.n_title + "</td>" 
    + "<td>" + item.n_dateTime + "</td>" 
    + "<td><button class='btn btn-danger delete-btn' data-id='" + item.id + "'>Delete</button></td>"; 
    $("#output").append(tr_str); 
});

的類添加事件回調裏面的.delete-btn會在頁面上已經存在的按鈕上添加多個事件。

來源

2017-07-02 15:04:15

對此有更好的解決方案，而不是在每個項目上創建事件。委派事件更清潔和更好。 – MiKE

@MiKE你是對的。只需將事件添加到班級就足夠了。 –

這個解決方案看起來像我的代碼最接近我的代碼，它很好地工作。感謝大家的幫助！ – Jonathan

你快到了。您正在使用html5屬性data-id在按鈕上設置ID。你使用jquery的數據函數來訪問ID。

$("#deletebut").on('click', function(){ 
    // display id of associated record 
    console.log($(this).data('id')); 
});

我還想指出，在循環中使用相同的ID不是一種方法。

您應該向該按鈕添加一個類，例如「刪除按鈕」。

然後你可以委託事件在身體上，看起來像這樣。

$("body").on('click', '.delete-button', function(){ 
    // display id of associated record 
    console.log($(this).data('id')); 
});

使用「this」關鍵字，你就可以獲取點擊的按鈕ID，不管有多少。並且在循環之外註冊這個事件。循環之後或之前，但不在裏面！

來源

2017-07-02 14:54:55 MiKE

不要忘記，OP實際上是在每次迭代中創建新按鈕，但是向它們添加相同的ID。元素ID在HTML文檔中必須是唯一的。 –

如果我點擊第一個按鈕，它會記錄相同的ID號碼，我有記錄的次數，即：如果我有3個記錄，它的控制檯記錄相同的ID x 3.如果我點擊任何其他記錄的按鈕，沒有任何反應 – Jonathan

剛編輯我的答案。 – MiKE

試試這個

$(document).ready(function(){ 
**var yourID='';** 
      $.ajax({ 
       url: 'functions/list-articles-delete.php', 
       dataType: 'json', 
       method: 'POST', 
       success: function(data) { 
       $.each(data, function(item){ 
        **yourID = data[item].n_title;** 
        var tr_str = "<tr>" 
        + "<td>" + data[item].n_title + "</td>" 
        + "<td>" + data[item].n_dateTime + "</td>" 
        + "<td><button class='btn btn-danger' id='deletebut' data-id='" + data[item].id + "'>Delete</button></td>"; 
        $("#output").append(tr_str); 

        $("#deletebut").on('click', function(){ 
         **console.log(yourID);** 
       }); 
      });   
     }, 
    }); 
});

來源

2017-07-02 14:59:17 FannyKaunang

顯示記錄，並從數據庫中像這樣刪除

回答

相關問題