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"); 
     }); 
    }); 
});

我也不在控制檯得到任何錯誤。

我必須失去了一些東西......

來源

2015-09-26 DavSev

的問題是，你正試圖初始化刷卡時，目標元素還沒有加載。此外，由於您在超時內顯示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"); 
    }); 
});

來源

2015-09-26 15:43:36 kosmos

jquery滑塊內彈出不工作

回答

相關問題