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

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 说它正在尝试删除我删除的第一个元素的先前 id。

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

例如

刚刚点击事件 90，点击删除。活动删除成功！ (Console.log = "刚刚尝试删除 ID #90") 只需点击事件 91，点击删除。没发生什么事。 (Console.log = "刚刚尝试删除 ID #90"

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

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 创建的所有未来元素也响应点击事件：

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