jQuery 仅适用于第二次点击 Ajax 加载页面答案

【问题标题】：jQuery only works on second click on Ajax loaded pagejQuery 仅适用于第二次点击 Ajax 加载页面
【发布时间】：2012-04-20 09:16:15
【问题描述】：

我对 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>JS 下，我第一次单击链接时会收到 GET jQuery 请求 (ajax.googleapis.com ) 变灰。当我再次单击时，新请求似乎没问题。不知道这是否有帮助，我正在尽一切努力使这项工作。谢谢！

【问题讨论】：

ajax_load 中有什么内容？此外，如果问题在于单击 AJAX 代码中的链接，那么查看该代码会更有帮助。
@JeffB 嗨，感谢您的反馈。 ajax_load 仅引用“加载”图像，以便在加载内容时向用户提供一些反馈：var ajax_load = "<img class='loading' src='../assets/images/load.gif' alt='loading...' />";。 The link I click to load the content is: <div id="mapping"> <div id="marker_pt"> <a id="loader"><img src="../assets/images/marker.png" class="marker_tool" title="France" /></a> </div>
仅供参考 - 从 jQuery 1.7 开始， .live() 方法已被弃用。使用 .on() 附加事件处理程序。
@neo108 谢谢我已将其更改为 .on()
幻灯片放映的代码是什么？

标签： jquery ajax

【解决方案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); 
             });
      });
});

【讨论】：

【解决方案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。

【讨论】：