jQuery only works on second click on Ajax loaded page

Question

I'm very new to Ajax and JQuery so please bear with me on this. I'm loading contents via Ajax on my page and the loaded content has a jQuery slideshow inside. When I click the link, everything runs ok, the content appears and all but the slideshow doesn't start at all. I need to click a second time on that link so the slideshow starts working.

This is my code so far:

var loadUrl = "map_fr.html";    
$("#loader").on('click',function(){
    $("#conteudo_projects").html(ajax_load).load(loadUrl);
    });

Then I select a link with the id="loader" to load the content inside the #conteudo_projects DIV.

Can anyone help me? Why doesn't the slideshow start working on the first click? (If I test the slideshow directly on a page it works, so I know that there's no problem with that, it only happens when I load it via Ajax).

Thank You very much!

EDIT: I installed Firebug and although I still dont quite understand what's all that stuff that it displays, I noticed that under Net>JS, the first time I click the link I get the GET jQuery request (ajax.googleapis.com) greyed out. When I click again, the new request seems ok. Dont know if this helps, i'm trying everything to make this work. Thanks!

Answer 1

The usage of the on api is incorrect.. Also have you made sure you are binding this event handler on document.ready.. Here is what the code should be:

Also your ajax load should probably be inside your event handler callback

$(document).ready(function(){
  $(document).on('click',"#loader",function(){
      $.ajax(url:url,
             type:"POST",
             success:function(data){  
             $("#conteudo_projects").html(data); 
             });
      });
});