AJAX 阻止图像滑块工作答案

【问题标题】：AJAX Blocks Image Slider from WorkingAJAX 阻止图像滑块工作
【发布时间】：2016-01-12 14:51:19
【问题描述】：

我正在网页上制作菜单栏。菜单栏基于一个名为Jcoverflip(

当我翻转上图顶部显示的徽标时。然后它确实会从其他 HTML 的 AJAX 样式加载内容。但是 Jcoverflip 滑块不再起作用。

Main.html

<div id="mycontainer">
  <div id=w rapper>
    <ul id="flip">
      <li>
        <img href="home" src="Logo.png" />
      </li>
      <li>
        <img href="product" src="Product.png" />
      </li>
    </ul>
  </div>
</div>

<div id="content"></div>

product.html

<img id="contact1" src="Contact.png">

MainMenu.js

jQuery( document ).ready( function(){

    $("#content").load("home.html");

    $("ul#flip li img").click(function(){
        var page = $(this).attr("href");
        $("#content").load(page + ".html");
        return false;
    });

  });

当您单击滑块中的产品徽标时，prouct.html 的 img 确实会按预期加载，但滑块不会滑动到产品徽标。滑块现在被冻结。

这里是更多代码的小提琴。 https://jsfiddle.net/qvgadgv4/ 小提琴不起作用，因为您需要 Jcoverflip。

有没有人可以帮助我理解为什么使用 AJAX 会阻止我的图像滑块工作？并想出一个解决方案，让它与 AJAX 一起工作。

【问题讨论】：

标签： javascript jquery html ajax

【解决方案1】：

好吧，我仍然不知道为什么这个 Ajax 方法会阻止我的滑块工作，但我偶然找到了一个解决方案。

你应该标识你的 img 而不是 href。

<div id="mycontainer">
<div id= wrapper>
<ul id="flip">

  <li><img id="home" src="Logo.png" /></li>
  <li><img id="product" src="Product.png" /></li>

</ul>
</div>

然后像这样加载内容

$("#home, #product, #submit2").click(function(){
         if(this.id == "home"){
             $("#content").load("home.html");
         }

         if(this.id == "product"){
             $("#content").load("product.html");
         }

     });

这会将内容加载到主 html 的 div 中，并且滑块将同时工作。

【讨论】：