jQuery只能在Ajax加载页面的第二次单击时工作

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.

我对Ajax和JQuery非常陌生，所以请耐心听我说。我在页面上通过Ajax加载内容，加载的内容中有一个jQuery幻灯片。当我点击链接时，一切都运行良好，内容出现了，除了幻灯片之外，所有内容都没有开始。我需要在该链接上再次单击，以便幻灯片开始工作。

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.

然后，我使用id="loader"选择一个链接来加载# arguudo_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).

谁能帮我吗?为什么幻灯片不能在第一次点击时开始工作?(如果我在页面上直接测试幻灯片，我知道这没有问题，只有通过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!

编辑:我安装了Firebug，尽管我还是不太明白它显示的是什么，但我注意到在Net>JS下，我第一次点击链接就会得到jQuery请求(ajax.googleapis.com)。当我再次点击时，新的请求看起来是可以的。我不知道这是否有帮助，我正在尽一切努力使这个工作。谢谢!

2 个解决方案

#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:

使用on api是不正确的。还需要确保将此事件处理程序绑定到document.ready.代码应该是这样的:

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

同样，ajax负载应该在事件处理程序回调中

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

#2

You may use jQuery load to load content like this

您可以使用jQuery load来加载这样的内容

This will show the ajax loading image which you stored in ajax_load variable and get content from yourUrl.Once it received the content from the ajax call it will replace the loading image mark up with the new content.

这将显示存储在ajax_load变量中的ajax加载映像，并从url获取内容。一旦它收到来自ajax调用的内容，它将用新的内容替换加载图像标记。

$(function(){
  $(document).on('click',"#loader",function(){
     $("#conteudo_projects").html(ajax_load).fadeIn(300,function(){
        $(this).load(yourUrl);
     });
  });
});

jQuery on is available from 1.7+ onwards. If you are using a version before that, you may want to consider jQuery live.

可以从1.7+开始使用jQuery。如果您在此之前使用了一个版本，您可能需要考虑jQuery live。

#1