jquery - jquery div点击数据

Question

这是我的代码

<a href="#" id="ref" data-post="5">Test<i class="icon-remove"></i></a>
<a href="#" id="ref" data-post="1">Test1<i class="icon-remove"></i></a>

jQuery：

$(document).ready(function() {

    $('#ref').on('click', function(e) {
       var post_id = $(this).data('post');
       e.preventDefault();
       alert(post_id);
    });

});

我在 JsFiddle 上的代码

为什么当我点击测试工作但当我点击 Test1 不工作？

先谢谢了。埃西斯。

Answer 1

每个 DOM 元素的 ID 必须是唯一的。

因此，请尝试添加class可行的元素。

例子

HTML

<a href="#" class="ref" data-post="5">Test<i class="icon-remove"></i></a>
<a href="#" class="ref" data-post="1">Test1<i class="icon-remove"></i></a>

jQuery

$('.ref').on('click', function(e)
{
    var post_id = $(this).data('post');
    e.preventDefault();
    alert(post_id);
});

Answer 2

而是尝试将 id 属性更改为 class：

 <a href="#" class="ref" data-post="5">Test<i class="icon-remove"></i></a>
 <a href="#" class="ref" data-post="1">Test1<i class="icon-remove"></i></a>

使用这个 jQuery：

$('.ref').on('click', function(e) {
   var post_id = $(this).data('post');
   e.preventDefault();
   alert(post_id);
});

查看工作演示

笔记：

如果您对同一页面上的多个元素使用相同的 id，会发生什么情况，当它获得第一个元素时，它会起作用，而其他元素则被忽略。那就是它失败的地方。

Answer 3

ID 是唯一的，如果您想使用相同的标识符，请将其更改为 classes。

如果您将 更改id="ref"为class="ref"，则选择$('.ref')它会起作用