jquery滑块内弹出不工作

问题描述：

我正在使用Jquery。弹出式工程，它弹出我想要的。

对于滑块，我使用Swiper jquery库。

如果我通过它测试弹出div内的代码自我滑块很好，但一定有一些碰撞。

这是我刚刚描述的链接。

这是弹出代码：

$(document).ready(function() { 
    $(window).load(function() { 
     $("div#slidex").append('<div class="pup disable"><div class="swiper-container"><div class="swiper-wrapper"><div class="swiper-slide"><img src="images/1.jpg" alt="pro group 1"></div><div class="swiper-slide"><img src="images/2.jpg" alt="pro group 2"></div><div class="swiper-slide"><img src="images/3.jpg" alt="pro group 3"></div><div class="swiper-slide"><img src="images/4.jpg" alt="pro group 4"></div></div> <div class="swiper-pagination"></div></div><img id="x" src="http://cmsresources.windowsphone.com/windowsphone/en-us/How-to/wp7/inline/basic-icon-x.png"> </div>'); 

     setTimeout(function() { 
      $("div.pup").fadeIn(200).addClass("active"); 
     }, 3000); 

     $('#x').on('click', function() { 
      $("div.pup").fadeOut(300).addClass("disable"); 
     }); 
    }); 
});

我也不在控制台得到任何错误。

我必须失去了一些东西......

答

的问题是，你正试图初始化刷卡时，目标元素还没有加载。此外，由于您在超时内显示div.pup，因此您应该在那里初始化sw iper。

你可以改进的其他事情是，你不需要等待分别加载DOM和内容。在这种情况下，仅等待DOM就足够了。

你的代码看起来应该像这样（jsFiddle）：

$(function(){ 
    $("div#slidex").append('<div class="pup disable"><div class="swiper-container"><div class="swiper-wrapper"><div class="swiper-slide"><img src="http://seveloff.com/test/images/1.jpg" alt="pro group 1"></div><div class="swiper-slide"><img src="http://seveloff.com/test/images/2.jpg" alt="pro group 2"></div><div class="swiper-slide"><img src="http://seveloff.com/test/images/3.jpg" alt="pro group 3"></div><div class="swiper-slide"><img src="http://seveloff.com/test/images/4.jpg" alt="pro group 4"></div></div> <div class="swiper-pagination"></div></div><img id="x" src="http://cmsresources.windowsphone.com/windowsphone/en-us/How-to/wp7/inline/basic-icon-x.png"> </div>'); 

    setTimeout(function() { 
     $("div.pup").fadeIn(200).addClass("active"); 
     new Swiper('.swiper-container', { 
      pagination: '.swiper-pagination', 
      nextButton: '.swiper-button-next', 
      prevButton: '.swiper-button-prev', 
      slidesPerView: 1, 
      paginationClickable: true, 
      spaceBetween: 30, 
      loop: true, 
      autoplay: 2500, 
      autoplayDisableOnInteraction: false, 
      effect: 'fade' 
     }); 
    }, 3000); 

    $('#x').on('click', function() { 
     $("div.pup").fadeOut(300).addClass("disable"); 
    }); 
});

jquery滑块内弹出不工作

相关推荐