JQuery: Getting data from child elements

Question

Markup:

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

In JQuery, i would select link 1 and it should be able to fetch the data-id of link1. I tried

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

It doesn't have any result.

Oh. the list gets generated after the page is loaded. I am querying the DB to get the list. Also, it is also possible for the list to change, depending on how the user filters the dB.

Thanks.

bjornruysen · Accepted Answer · 2012-06-13 08:31:18Z

4

If the list is generated after the page is loaded, the .click binding might not work. Maybe you can try .live, like so:

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

EDIT:

What I always seem to forget :) as of jQuery 1.7, .live() is deprecated. You should use .on() like so:

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

edited Jun 13, 2012 at 8:31

answered Jun 13, 2012 at 8:19

bjornruysen

8501 gold badge6 silver badges15 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Th0rndike Over a year ago

since jquery 1.7 .live() is deprecated. Use .on() instead.

user1432124 Over a year ago

dude this is wrong way of using on if the content is loaded after attaching event to DOM

bjornruysen Over a year ago

I had an error in my .on() example, as @Somebodyisintrouble correctly mentioned. I edited the example. You can also look at his answer!

Andy · Accepted Answer · 2012-06-13 08:25:36Z

2

use .on because live is deprecated and also put your code inside document.ready()

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

edited Jun 13, 2012 at 8:25

Andy

30.2k9 gold badges43 silver badges59 bronze badges

answered Jun 13, 2012 at 8:19

user1432124

2 Comments

Mr A Over a year ago

My example isn't exactly what my data is structured. What if it was .item-list is in a table?

user1432124 Over a year ago

No problem until .item-list is inside body

jakee · Accepted Answer · 2012-06-13 08:41:23Z

0

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

See if that works

edited Jun 13, 2012 at 8:41

answered Jun 13, 2012 at 8:21

jakee

18.6k3 gold badges39 silver badges42 bronze badges

1 Comment

akalucas Over a year ago

Wouldn't it be link.attr('data-id') then?

Collectives™ on Stack Overflow

JQuery: Getting data from child elements

3 Answers 3

3 Comments

2 Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

3 Comments

2 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related