弹出窗口dosen'内的Jquery滑块；行不通

我正试图在弹出框中设置一个滑块

我正在使用Jquery。 弹出窗口工作，它弹出我想要的

对于滑块，我使用Swiper jquery库

如果我自己测试popup 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");
        });
    });
});

$（文档）.ready（函数（）{
$（窗口）。加载（函数（）{
$（“div#slidex”）。追加（“”）；
setTimeout（函数（）{
$（“div.pup”）.fadeIn（200）.addClass（“活动”）；
}, 3000);
$（'#x'）。在（'click'，function（）上{
$（“div.pup”）.fadeOut（300）.addClass（“禁用”）；
});
});
});

我在控制台上没有收到任何错误

---

我一定错过了什么

问题在于，当目标元素尚未加载时，您正试图初始化swiper。此外，当您在超时内显示

div.pup

时，您应该在那里初始化开关

您可以改进的另一件事是，您不需要等待分别加载DOM和内容。在这种情况下，只等待DOM就足够了

您的代码应该如下所示（）：

$（函数（）{
$（“div#slidex”）。追加（“”）；
setTimeout（函数（）{
$（“div.pup”）.fadeIn（200）.addClass（“活动”）；
新的水龙头（“.Swiper container”{
分页：'.swiper分页'，
下一个按钮：'.swiper按钮下一个'，
prevButton:“.swiper button prev”，
幻灯片视图：1，
paginationClickable:true，
空间期:30,，
循环：对，
自动播放：2500，
autoplayDisableOnInteraction:false，
效果：“褪色”
});
}, 3000);
$（'#x'）。在（'click'，function（）上{
$（“div.pup”）.fadeOut（300）.addClass（“禁用”）；
});
});

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