Question

i have a script that calls a php file and gets an JSON object from it.
I’m tring to get the ids from the object attached to a specific element that is created by iterating with $.each the json object. Here is what i have done so far:

$(document).ready(function()
{
    $("#div2").hide('slow');
    $("#div1").empty().html('<img src="ajax-loader.gif" />');
    $.ajax(
    {
        type: 'post',
        async: true,
        url: "Parents.php",
        data: {'id' : 12200},
        dataType: "json",
        cache: false,
        success: function(json_data)
        {
            $("#div1").empty();
            $.each(json_data, function(key, value)
            {
                $("#div1").append('<p class="node"><b>['+key+']</b> => '+value+'</p>');
                $(this).data('id', key);
            });
        }
    });
    $("p.node").click(function()
    {
        var id = $(this).data('id');
        alert('The ID is: ' + id);
    });
});

What I’m trying to achieve is making every node aware of it’s ID so when i click, hover etc. i can use that id to do something else like call an other php file with that id.

I’m using fireBug and fireQuery and i noticed that each paragraph that is created has an id and the value of it is the same for all plus it’s the value of the last id (145).

Here is the JSON data i get from the php file (json_encode method):

{"908":"one",
 "143":"two",
 "104":"three",
 "9655":"four",
 "144":"five",
 "142":"six",
 "145":"seven"}

Tnx in advance any idea/help would be appreciated.

Answer 1

You’re assigning the data to thing json pair you’re looping over…change it up a bit, like this:

$('<p class="node"><b>['+key+']</b> => '+value+'</p>').data('id', key)
                                                      .appendTo("#div1");

This creates the object using $(html), sets .data() on that, then appends it using .appendTo().

---

Additional fix, for anyone finding this later:

$("p.node").click(function() {

needs to be:

$("p.node").live('click', function() {
//or:
$("#div1").delegate('p.node', 'click', function() {

Since the success function runs later, the $("p.node") won’t find any of the elements created in it, whereas .live() will work, even if they’re created later.