AJAX阻止工作中的图像滑块

Question

我正在网页上使用菜单栏。菜单栏基于名为Jcoverflip的图像库（＆lt; =您将在此处找到演示）。图像滑块完美运行。直到我开始尝试使用AJAX技术加载来自不同HTML的内容。

当我翻转上面图像顶部显示的徽标时。然后它确实加载了其他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。

Answer 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中，滑块将同时工作。