jquery .load, called from inside of loaded content

Question

im using .load to load content into a div, i would then like to load in new content called from inside the 1st loaded content ..

ive also got the a nivo slider running from inside the loaded content so at the moment its looking like this

google.setOnLoadCallback(function() {
    $("#pegasus-tile, #o-w").click(function(){
        $("#proj-content").load("projects/pegasus.html", function(){
            <div id="slider" class="nivoSlider"></div>      
            $('#slider').nivoSlider();
        });
    });
});

i beleve its should look like somthing like this ...

google.setOnLoadCallback(function() {
    $("#pegasus-tile, #o-w").click(function(){
        $("#proj-content").load("projects/pegasus.html", function(){

            <div id="slider" class="nivoSlider"></div>
            $('#slider').nivoSlider(),

            $("#close").click(function(){
                $("#proj-content").load("projects/blank.html");
            });
        });
    });
});

...but i just cant get it too work, any helps much appreciated

Answer 1

To add a div to the page using jQuery, you want to do the following:

$('<div id="slider" class="nivoSlider"></div>').appendTo($('body'));

Replacing $('body') with any selector or jQuery object where you waqnt the div added.

You cannot just put HTML inside of a javascript. This might by fluke be ignored, depending on where you defined your javascript, but it isn't valid, and isn't doing what you think.

google.setOnLoadCallback(function() {
    $("#pegasus-tile, #o-w").click(function(){
        $("#proj-content").load("projects/pegasus.html", function(){

            $('<div id="slider" class="nivoSlider"></div>').appendTo('#proj-sontent');
            $('#slider').nivoSlider(),

            $("#close").click(function(){
                $("#proj-content").load("projects/blank.html");
            });
        });
    });
});