Search code examples
jqueryajaxjquery-load

trigger and .load new content from inside of already .loaded content

im trying to .load some content which is triggered by clicking an tag with an id# which is already inside of loaded content.

At the moment im using this (bellow) to load the content in the first place, run a nivo slider and then the bit im having trouble with trying to load in the new content

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

        $('<div id="slider" class="nivoSlider"></div>');
        $('#slider').nivoSlider({effect: 'sliceUpDown'}),

    $("#next-pegasus").click(function(){
        $("#proj-content").load("projects/bg-app.html");        

        });
      });
   });
});
Solution

  • Have a look at the .live() function.

    Your code doesn't work, because the element with id next-pegasus is dynamically added and the default .click()-Listener cant "see" this element. To get it work, implement the click-Listener for the #next-pegasus element like this:

    $('#next-pegasus').live('click', function() {
    // do the same stuff here ...
});

    Edit:

    Use the .on()-function instead, because the .live() is deprecated.