Question

标记：

<ul>
<li><a href="#" class="item-list" data-id="1">Link 1</a></li>
<li><a href="#" class="item-list" data-id="2">Link 2</a></li>
<li><a href="#" class="item-list" data-id="3">Link 3</a></li>
</ul>

在JQuery中，我会选择链接1，它应该能够获取link1的data-id。我试过了

$('.item-list').click(function(){
 var link = $(this);
 alert($(this).data('id'));
});

它没有任何结果。

喔。页面加载后生成列表。我正在查询数据库以获取列表。此外，列表也可以更改，具体取决于用户如何过滤dB。

感谢。

Answer 1

如果在加载页面后生成列表，则.click绑定可能不起作用。也许你可以试试.live，如下：

$('.item-list').live('click', function(){
   var link = $(this);
   alert($(this).data('id'));
});

修改

我似乎总是忘记:)从jQuery 1.7开始，.live()已被弃用。您应该像.on()那样使用：

$("body").on("click",".item-list",function(){ var link = $(this); alert($(this).data('id')); });

Answer 2

使用.on因为不推荐使用live，并且还将代码放在document.ready()

中

$(function(){  //short form of document.ready        
    $("body").on("click",".item-list",function(){
        var link = $(this);
        alert($(this).data('id'));
    });
});

Answer 3

$('ul').on('click', '.item-list', function() {
  var link = $(this);
  alert(link.attr('data-id'));
});

看看是否有效

JQuery：从子元素获取数据

3 个答案: