表示レコードと

Question

を削除私はこのようなデータベースからレコードを表示しています：私は、私はそれが（CONSOLE.LOGしたいボタンのいずれかをクリックすると）

$(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 
       }); 
      });   
     }, 
    }); 
}); 

のIDを関連するレコードが、どのようにこれを行うには非常に確実ではない？

Answer 1

を試してみてください。 HTMLでは、idはすべて一意である必要があります。

実際にはidを削除して、代わりにクラスを使用することができます。こうすることで、すべてのボタンを同時にカバーする1つのイベントを登録できます。

どのように私はこれに相当するであろう。ここです：
（変更の説明のためのコメントを読む）今

// 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は、すでにページに存在するボタンに複数のイベントを追加します。

Answer 2

あなたはほぼあります。 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を取得できます。また、このイベントをループ外に登録します。ループの後または前に、ループの中には入っていません。

Answer 3

あなたは現在、すべてのボタンに同じidを与えている。この

$(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);** 
       }); 
      });   
     }, 
    }); 
});