Question

I have a problem. This code worked when the html was static and not appended, but when append data it does not...

I have appended data from a JSON-document like so:

$('#articles').append('<article><time pubdate="pubdate">' + pubDate + '</time><h2><a href="#">' + headline + '</a></h2><p>' + bodyText + '</p></article>'); 

After this I create a variable containing the first article:

var currentElement = $("article:first");

Then I want to access currentElement.position():

console.log(currentElement.position());

But it comes back as undefined... It worked with unappended data? What am I doing wrong?

Thanks for the help!

EDIT: Here is the entire code:

$(document).ready(onDocumentReady);     

    function onDocumentReady()
    {
        console.log('Document ready'); 

        $.ajax({
            type:'GET',
            url:'data.json',
            dataType:'json',
            success: jsonParser
        });

        function jsonParser(json)
        {
            $.getJSON('data.json',runData)


            function runData(data)
            {   
                $.each(data.article, writeData)

                function writeData(keys,values)
                {


                    var pubDate = values.pubDate;
                    var headline = values.headline;
                    var bodyText = values.bodyText;

                    $('#articles').append('<article><time pubdate="pubdate">' + pubDate + '</time><h2><a href="#">' + headline + '</a></h2><p>' + bodyText + '</p></article>');
                }
            }

        }



        var currentElement = $("article:first");

        console.log(currentElement.position());

EDIT AGAIN:

When I

console.log(currentElement); 

I get:

[prevObject: x.fn.x.init[1], context: document, selector: "article:first", jquery: "1.10.2", constructor: function…] context: document length: 0 prevObject: x.fn.x.init[1] selector: "article:first" proto: Object[0]

Don't really understand that stuff, but thought it might help

UPDATE: If I do a setTimeOut like this, I am able to access the element:

setTimeout(function()
        {
        var currentElement = $("article:first");
        console.log(currentElement);
        console.log(currentElement.position().left);
        }, 1000);

No correct solution

OTHER TIPS

It should be $("article:first-child")

Edit

Never mind :first works in jQuery.

Please make your ajax is returning data and article elements are getting created . If no elements are getting created then it will return undefined.

Before the success function, try to add: async: false in your ajax call.

$.ajax({
            type:'GET',
            url:'data.json',            
            dataType:'json',
            async:false,
            success: runData(data)
        });
        function runData(data){   
            $.each(data.article, writeData)
            function writeData(keys,values){
                var pubDate = values.pubDate;
                var headline = values.headline;
                var bodyText = values.bodyText;
                $('#articles').append('<article><time pubdate="pubdate">' + pubDate + '</time><h2><a href="#">' + headline + '</a></h2><p>' + bodyText + '</p></article>');
            }
        }
Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow
scroll top