具有相同ID的多个按钮[关闭]

Question

已解决：咖啡不足 - 在创建按钮之前添加了事件侦听器。

我正在从 HTML LocalStorage 创建一个表格，如下所示：

for (i = 1; i <= localStorage['count']; i++) {
        tableHtml = tableHtml + "<tr><td><button class='delete' id=" + i + ">Delete</button></td><td>" + localStorage['fullName' + i] + "</td><td>" + localStorage['email' + i] + "</td><td>" + localStorage['phoneNum' + i] + "</td></tr>";
    }

这很好用，但是删除按钮很麻烦。

我看到了这个：

jQuery find ID of clicked button by class

所以我认为我可以做到这一点：

$(".delete").click(function () {
    alert('delete clicked for id: ' + $(this).id);
});

但是，它不起作用。有什么建议吗？

Answer 1

您可以使用 javascript 获取元素的 id，而无需使用 jquery 包装器，如下所示：

$(".delete").click(function () {
    alert('delete clicked for id: ' + this.id); // get id via javascript
});

或：

 $(".delete").click(function () {
        alert('delete clicked for id: ' + $(this)[0].id); // via javascript object
    });

如果您看到有问题的 link 被引用，它也正在使用 javascript (this.id) 获取 id

如果你想通过 jquery 获取，那么：

 $(".delete").click(function () {
            alert('delete clicked for id: ' + $(this).attr("id")); // via jquery object
        });

Answer 2

什么时候绑定点击事件？如果它在元素存在之前，你会想要使用 .on。

$('body').on('click','.delete', function(){
    alert('delete clicked for id: ' + $(this).attr('id'));
});

查看有效的jsFiddle。

Answer 3

使用纯javascript：

this.id

或者jquery

$(this).attr('id');

$(this) 是 jquery 对象。并且您正在尝试获取 javascript 属性 ID。您需要先将对象转换为 javascript。

$(this)[0].id;

Answer 4

DOM 元素不应将数字作为 id 的第一个字符。 把你的代码改成这样：

for (i = 1; i <= localStorage['count']; i++) {
    tableHtml = tableHtml + "<tr><td><button class='delete' id=del-id" + i + ">Delete</button> </td><td>" + localStorage['fullName' + i] + "</td><td>" + localStorage['email' + i] + "</td><td>" + localStorage['phoneNum' + i] + "</td></tr>";
}

和

$(".delete").click(function () {
    alert('delete clicked for id: ' + $(this).prop('id');
});

这应该会带您走上正确的道路。 请记住 .prop() 函数是 jQuery 1.10+ 特定的。 如果您使用的是旧版本，请使用 .attr()

正如这里的一些人提到的 - 从 HTML5 开始，id 可以是数字 仍然以数字形式使用它们可能会产生相当不愉快的问题。 来自其中一位用户的以下 cmets 链接。