jquery - JQuery：从子元素获取数据

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，它应该能够获取链接 1 的数据 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'));
});

看看这是否有效