jQuery ready functions not loading after appending

Question

I have the following in my head tag:

<script type="text/javascript">
    $(function() {
        $.get('content/menu_items.txt', function(data) {
            var menu_items = data.split('\n');
             $.each(menu_items, function(key, val){
                 var menu_items_split = val.split(',');
                    $('#header-bg > .inline_links').append('<a href="'+  menu_items_split[1] +'"><li>'+  menu_items_split[0] +'</li></a>');
             });   
        });   
    });
</script>

I also have a ready function called to add rounded corners to my nav buttons. Everything works fine if I statically add the li tags into the div, but if I use the above code, the corner functions and animations aren't applied. Any idea's why this is?

If you don't understand, here is the full code and comments to help you better understand

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<link href="css/stylesheet.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.js"></script>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.18/jquery-ui.js"></script>
<script type="text/javascript" src="js/jquery.corner.js"></script>
<script type="text/javascript" src="js/default.js"></script>

<script type="text/javascript">
    $(function() {
        $.get('content/menu_items.txt', function(data) {
            var menu_items = data.split('\n');
             $.each(menu_items, function(key, val){
                 var menu_items_split = val.split(',');
                    $('#header-bg > .inline_links').append('<a href="'+  menu_items_split[1] +'"><li>'+  menu_items_split[0] +'</li></a>');
             });   
        });   
    });
</script>
</head>

<body>

<div id="header-bg">
    <ul class="inline_links">

<li>test</li> //THIS WORKS, ADDS ROUNDED CORNERS AND ANIMATION;

    </ul>
</div>

</body>
</html>

Do you call the function that you use to add the rounded corners after running the $.GET ? — Zuul, Apr 26 '12 at 21:15
no, i have a ready function inside default.js that should apply to all
problem solved. switched .get function to .ajax with async off and works just fine. — sandstorm140, Apr 27 '12 at 12:49

score 1 · Answer 1 · answered Apr 26 '12 at 21:17

1

Depending on your CSS, I would suspect that you should put the <li> tag outside the <a>;

$('#header-bg > .inline_links').append('<li><a href="'+  menu_items_split[1] +'">'+  menu_items_split[0] +'</a></li>');

answered Apr 26 '12 at 21:17

Matt Tew

1,581
1
9
15

1
It doesn't matter how his CSS looks like - a `
` inside `
` but outside `
` makes no sense.
– ThiefMaster Apr 26 '12 at 21:20
Note also that this also makes your [code valid](http://stackoverflow.com/questions/2161337/can-we-use-any-other-tag-inside-ul-along-with-li) – Matt Tew Apr 26 '12 at 21:20
@ThiefMaster - I agree with you (see my further comment) but this was not the question. – Matt Tew Apr 26 '12 at 21:22
@MattTew and ThiefMaster, +'d for the syntax awareness :) – Zuul Apr 26 '12 at 21:31
thanks for the tip, I have moved the tags inside the
.

sandstorm140

Apr 27 '12 at 09:06

score 1 · Answer 2 · answered Apr 26 '12 at 21:30

1

In order for the Jquery Corner to be applied to you newly created li, you can try this:

JQUERY:

$(function() {
  $.get('content/menu_items.txt', function(data) {
    var menu_items = data.split('\n');
    $.each(menu_items, function(key, val){
      var menu_items_split = val.split(',');
      $('#header-bg > .inline_links').append('<li><a href="'+menu_items_split[1]+'">'+  menu_items_split[0] +'</a></li>');
      // the new line to try
      $('#header-bg > .inline_links li').last().corner();
    });   
  });   
});

The new line will target the last <li>, the one just appended and apply the corner script to it.

answered Apr 26 '12 at 21:30

Zuul

16,217
6
61
88

+'d because thinking about it, your's is probably the correct answer. – Matt Tew Apr 26 '12 at 21:34
this indeed works thank you. However is there anyway to automatically apply it from within another .js file? I have code inside a default.js file that should automatically apply it along with some animation code. – sandstorm140 Apr 27 '12 at 09:15
problem solved. switched .get function to .ajax with async off and works just fine. – sandstorm140 Apr 27 '12 at 12:49
Well, thats one way, but keep in mind that with async off, the page will stay waiting for does contents to be retrieved, thus increasing the overall load time. – Zuul Apr 27 '12 at 17:59

jQuery ready functions not loading after appending

2 Answers2