jquery - Why is .load() of iframe having trouble accessing page elements?

Question

I am creating an iframe with jquery, both parent and child are in the same domain (no SOP errors).

Before creating the iframe, I attach a 'data' element to a page node like this

$('#anElement').data("test","This is a test");
console.log($('#anElement').data("test")); // This displays the correct "This is a test string"

After this I create the iframe

var iframe = $('<iframe>')
        // Set source
        .attr('src',src)
        // Set function to be called on load
        .load(function(){

            $('body').find('iframe')[0].contentWindow.test(); // This function is inside the iframe and it's called correctly 
            console.log($('#anElement').data()); // This displays undefined in console. 
        });
$('body').append(iframe); // Add it to the page

Note, if I do a

console.log($('#anElement'));

within the 'load' function, the console displays the correct element.

I fear there's something very trivial preventing me to find the issue, does anyone now how to help me out?