Question

我在做的是：

$(document).on("click", "#deleteMe", function (){

    var id = $(this).data("id");
    console.log(id);

    // function to delete event by id goes here
});

我的删除HTML如下所示：

<div id="deleteMe" data-id="">Delete</div>

通过不同的函数给出data-id值，这样一旦页面有很多事件，当模态加载时，上面的data-id字段有数字，如90,91,92等。所以，例如：

<div id="deleteMe" data-id="90">Delete</div>
<div id="deleteMe" data-id="91">Delete</div>
<div id="deleteMe" data-id="92">Delete</div>

这在我第一次单击“删除”时完美无缺 - 事件将从数据库中删除，就像我想要的那样。不幸的是，每次单击一个不同的事件并再次单击“删除”时，删除失败，console.log表示它正在尝试删除我删除的FIRST元素的先前ID。

这就像我第一次使用onclick函数时它绑定了我使用的原始id，从那时起的每次点击都保持相同的id而不是传递新的data-id。我该如何解决这个问题？

实施例

点击事件90，点击删除。活动已成功删除！（Console.log =“只是试图删除ID＃90”）刚点击事件91，点击删除。什么都没发生。（Console.log =“只是试图删除ID＃90”

在单击删除之前检查元素时，会出现正确的数据ID - 它只是单击“删除”，它不会从我正在尝试删除的下一个事件中获取新的数据ID值。 / p>

Answer 1

对于初学者来说，如果你要将多个元素标记为deleteMe，你应该使用一个类而不是id。 ID应该是唯一的。也许你对data-id的价值应该是id。

假设您将元素更改为：

<div class="deleteMe" data-id="90">Delete</div>

要删除已点击的元素，您可以执行以下操作：

$('.deleteMe').click(function() {
  console.log('Deleting ID:', $(this).attr('data-id'));
  $(this).remove();
});

- 编辑 -

由于人们提到我错过了事件授权点，你可以这样做，以确保用类deleteMe创建的所有未来元素也响应click事件：

$(document).on('click', '.deleteMe', function() {
  console.log('Deleting ID:', $(this).attr('data-id'));
  $(this).remove();
});

Answer 2

我刚刚通过更改此功能解决了这个问题：

var id = $(this).data("id");

为：

var id = $(this).attr("data-id");

我认为没有区别，但是双重和三重检查确认这两个功能的运作方式不同。

在这里找到关于DOM的一些有趣信息：http://www.peterbe.com/plog/data-and-attr-in-jquery

如何通过onclick函数传递不同的变量？

2 个答案: