Data Attribute in Frame returning undefined from JQuery

Question

The html looks like this:

<ul class="categoryitems">
    <li><a data-url="../po/browse_po.php" href="welcome.php" target="main">PURCHASE ORDERS</a></li>           
    <li><a data-url="../po/po_email_config.php" href="welcome.php" target="main">PO EMAILS</a></li>     
</ul>

Ignore the hrefs they are not relevant. I plan to prevent default on them.

What is relevent is the jquery failing:

$('a').click(function()
    {
        alert($(this).parent().html()); //shows the a tag with the data-url attribute
        //$(this).data('url',"..someurl.com");
        alert($(this).data('url')); //returns undefined; when the previous line is uncommented works 
        alert($(this).attr('data-url')); //this works        
    });

If it makes a difference the click function is wrapped in this:

$("#wndNavbar").ready( function() { 

});

Because its in a frame:

<frameset cols="<?=$gl_navbar_width?>,*" frameborder="0" framespacing="5" border="0">
    <frame id="wndNavbar" name="wndNavbar" src="nav_bar.php" scrolling="auto" marginheight="0" noresize>
    <frame name="main" src="welcome.php" scrolling="auto" marginheight="0" noresize>
</frameset>  

Answer 1

That's not how you read the data-url . this is the right way:

alert($(this).data('url'));

or

alert($(this).attr('data-url'));

Update: Since the above doesn't seem to fix it for you, have you tried to use

$(document).ready(function() {

});

or

$("#wndNavbar").live(function() {

});

instead of

$("#wndNavbar").ready( function() { 

});

UPDATE 2: You seem to be using a frame , NOT an iframe . ready does not work on frame s, so you need to use load :

$("#wndNavbar").load( function() { 

});