显示记录，并从数据库中像这样删除

我显示记录：显示记录，并从数据库中像这样删除

$(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

显示记录，并从数据库中像这样删除

回答

相关问题