Question

I’m trying to load a PHP document dynamically which uses some jQuery events on the same script so after loading the webpage the jQuery effects don’t work.

For example:

$(document).ready(
  function(){
     main();
     function main()
     {
       $('#game1').hover(
         function(){ $('#info1 p').slideDown('fast'); },
         function(){ $('#info1 p').slideUp('fast'); }
       );   
       $("#izquierda a").click(function()
       {
          $('#izquierda ul').hide();
          $('#content').slideDown();
          $('#menu').slideDown();
          $('#contentMin').hide();
          $("#gameContent").load("content.php", main()); // i try loading main() again so the effects would have some effect? doesn't work though
       });
    }               
});

And in content.php I load data from a database and place it in a div called #game1 which uses the hover effect but it doesn’t work after I loaded content.php. Without having it loaded from content.php the same script works.
So how can i make it work?
Sorry im new to this, thanks!

Answer 1

Since the server needs to render the code, you need to use AJAX here. Look up the jQuery ajax function: http://api.jquery.com/jQuery.ajax/.

$("#gameContent").ajax({
    url: "content.php",
    success: function(){ main(); }
});