Question: I am new at jQuery/javascript. I tried some suggestions I found on this forum but so far it did not help.

THis is what I am trying:

When loading categories from a database ( using ajax) this HTML statement is added for each category:

```
$("#Links ul").append('<li id=\"cat' + i + '" data-catid=' + i + '>' + categorie_tekst[1] + '</li>');

```

Using F12 I see that the lines are correctly added.

E.g. `<li id="cat3" data-catid="3">Seafood </li>`

Next step is selecting a category in the screen and retrieve the products of this category using the value set for data-catid.

I have been told that I could "this.id" but so far no luck. Displaying the value of this.id with alert returns the correct value but for some reason I can't use it.

When I add (#cat3).attr(“data-catid”) in the code it works. But different options like these did not work:

```
("#cat"+ this.id).attr(“data-catid”) 
(this).attr(“data-catid”)
var x = $(this).id();
var rest = x.substr(4, 1);

```

Everything with "this" creates error : `Uncaught TypeError: ("#cat" + this.id).attr is not a function...`

Trying to display any of these options does not give any output (not even a popup when I set an alert)

Any help would be appreciated!

Answer: 
You are loading dynamic values. Please use [Event Delegation](http://learn.jquery.com/events/event-delegation/). And the [`$.one()`](http://api.jquery.com/one/) binds the event once.

You need to add this in your `ready` function.

```
$(document).ready(function () {
    $("#Links ul").one("click", ".cat", function(){
        alert($(this).data('catid'))
    });
});

```

To get the IDs of the elements, use `$(this).attr("id")` or `$(this).prop("id")` (latest jQuery) instead of `this.id`, as sometimes, it might return the jQuery object.
As you are creating elements like

```
$("#Links ul").append('<li class="cat" id=\"cat' + i + '" data-catid=' + i + '>' + categorie_tekst[1] + '</li>');

```

create elements using jQuery

```
$("#Links ul").append( $('<li></li>', {
    class: "cat",
    id: "cat" + i,
    data-catid: i,
    text: categorie_tekst[1]
});

```

As you are creating elements dynamically use [Event Delegation](http://learn.jquery.com/events/event-delegation/). You have to use [.on()](http://api.jquery.com/on/) using delegated-events approach.

```
$(document).ready(function () {
    $("#Links ul").on(event, ".cat", function(){
        alert($(this).data('catid'))
    });
});

```