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
– Zuul, Commented Apr 26, 2012 at 21:15
no, i have a ready function inside default.js that should apply to all <li> items inside the inline_links class. I tried moving the script before default.js is loaded but same results. — sandstorm140
– sandstorm140, Commented Apr 27, 2012 at 9:10
problem solved. switched .get function to .ajax with async off and works just fine. — sandstorm140
– sandstorm140, Commented Apr 27, 2012 at 12:49

Matt Tew · Accepted Answer · 2012-04-26 21:17:59Z

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, 2012 at 21:17

Matt Tew

1,6311 gold badge10 silver badges15 bronze badges

Sign up to request clarification or add additional context in comments.

5 Comments

ThiefMaster Over a year ago

It doesn't matter how his CSS looks like - a <a> inside <ul> but outside <li> makes no sense.

Matt Tew Over a year ago

Note also that this also makes your code valid

Matt Tew Over a year ago

@ThiefMaster - I agree with you (see my further comment) but this was not the question.

Zuul Over a year ago

@MattTew and ThiefMaster, +'d for the syntax awareness :)

sandstorm140 Over a year ago

thanks for the tip, I have moved the <a> tags inside the <li>.

Zuul · Accepted Answer · 2012-04-26 21:30:11Z

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, 2012 at 21:30

Zuul

16.3k6 gold badges63 silver badges88 bronze badges

4 Comments

Matt Tew Over a year ago

+'d because thinking about it, your's is probably the correct answer.

sandstorm140 Over a year ago

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 Over a year ago

problem solved. switched .get function to .ajax with async off and works just fine.

Zuul Over a year ago

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.

Collectives™ on Stack Overflow

jQuery ready functions not loading after appending

2 Answers 2

5 Comments

4 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

5 Comments

4 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related