Question

我是Ajax和JQuery的新手，所以请耐心等待。我在我的页面上通过Ajax加载内容，加载的内容里面有一个jQuery幻灯片。当我点击链接时，一切运行正常，内容出现，除幻灯片外的所有内容都没有启动。我需要再次点击该链接，以便幻灯片开始工作。

到目前为止，这是我的代码：

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

然后我选择一个id =“loader”的链接来加载#conteudo_projects DIV中的内容。

任何人都可以帮助我吗？为什么幻灯片不会在第一次点击时开始工作？（如果我直接在它运行的页面上测试幻灯片，那么我知道没有问题，只有当我通过Ajax加载它时才会发生。）

非常感谢你！

编辑：我安装了Firebug，虽然我还不太明白它显示的是什么，我注意到在Net＆gt; JS下，我第一次点击链接时得到了GET jQuery请求（ajax.googleapis.com）灰了。当我再次点击时，新请求似乎没问题。不知道这是否有帮助，我正在尽一切努力使这项工作。谢谢！

Answer 1

on api的用法不正确。还要确保在document.ready上绑定此事件处理程序。以下是代码应该是：

此外，您的ajax加载应该在您的事件处理程序回调

中

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

Answer 2

您可以使用jQuery load加载此类内容

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

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

jQuery on从1.7以上开始提供。如果您之前使用的是版本，则可能需要考虑jQuery live。

jQuery仅在第二次单击Ajax加载页面时起作用

2 个答案: