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

使用纯javascript：

this.id

或jquery

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

因为$(this)是jquery对象。而你正试图获得javascript属性id。您需要先将对象转换为javascript。

$(this)[0].id;

Answer 3

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可以是数字仍然以数字形式使用它们可能会产生相当不愉快的问题。在下面的评论中链接其中一个用户。

Answer 4

您何时绑定点击事件？如果在元素存在之前，您将要使用.on。

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

查看有效的jsFiddle。

具有相同ID的多个按钮

4 个答案: