为什么 .swiper-button-prev 和 .swiper-button-next 不起作用？

Question

js 小提琴：https://jsfiddle.net/rfbvL4gj/7/

我有滑块，里面有图片。当我点击其中一张图片时，所有内容都被隐藏，并显示 .layer 元素和第二个带有相同图片的大型滑块。

但是有一个问题：当我点击大型滑块的 .swiper-button-next 和 .swiper-button-prev 时，什么也没有发生。我不知道出了什么问题。

JS：

let album_images_slider = new Swiper("#album_images_slider", {
    direction: "horizontal",
    slidesPerView: 1,
    loop: true,
    allowTouchMove: false,
    speed: 600,
    autoplay: {
        delay: 3000
    },

    navigation: {
        nextEl: ".swiper-button-next",
        prevEl: ".swiper-button-prev"
    }
});

let album_images_slider_scale = new Swiper("#album_images_slider_scale", {
    direction: "horizontal",
    slidesPerView: 1,
    loop: true,
    allowTouchMove: false,
    speed: 600,
    autoplay: {
        delay: 3000
    },

    navigation: {
        nextEl: ".swiper-button-next",
        prevEl: ".swiper-button-prev"
    }
});

$("#album_images_slider").click(function(e) {
        if (e.target.nodeName == "IMG") {
            $("body *").hide();
            $("body").prepend(`<div class="layer"></div>`);
            $(".layer").append(`
                <div class="swiper-container" id="album_images_slider_scale">
                        <div class="swiper-wrapper">
                            <div class="swiper-slide">Slide 1</div>
                            <div class="swiper-slide">Slide 2</div>
                            <div class="swiper-slide">Slide 3</div>
                            <div class="swiper-slide">Slide 4</div>
                        </div>
                        <div class="swiper-navigation">
                            <div class="swiper-button-next"></div>
                            <div class="swiper-button-prev"></div>
                        </div>
                </div>
            `);
        }
    });
    
    $("body").on("click", ".layer", function(event) {
        let target = event.target;
        if (!($(".swiper-container").has(target).length || $(target).hasClass("swiper-container")))                 { 
            $(".layer").remove();
            $("body *").show();
            
        }
        if ($(target).hasClass("swiper-button-next")) {
            console.log("next");
        }
        else if ($(target).hasClass("swiper-button-prev")) {
            console.log("prev");
        }
    });

Answer 1

JavaScript 是同步的

如果你想插入指定的内容（在你的情况下是 Swiper HTML），而不是“做一些与此内容相关的事情”，那么顺序应该是：

1. Jquery append()
2. 在附加 DOM 节点上“做某事”（在您的情况下为“滑动滑块”）。

不工作：

$("b").css("background-color", "yellow"); 
$("p").append(" <b>Appended text</b>.");

工作：

$("p").append(" <b>Appended text</b>.");
$("b").css("background-color", "yellow");

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>

<p>Broken code example.</p>

<script>
    $("p").append(" <b>Appended text</b>.");
    $("b").css("background-color", "yellow");
</script>

在您的情况下，顺序是 2 然后是 1。

相关： jQuery function after .append

Hello World 示例

$(".layer").append(`
                <div class="swiper-container">
                        <div class="swiper-wrapper">
                            <div class="swiper-slide">Slide 1</div>
                            <div class="swiper-slide">Slide 2</div>
                        </div>
                        <div class="swiper-navigation">
                            <div class="swiper-button-next"></div>
                            <div class="swiper-button-prev"></div>
                        </div>
                </div>
`);

var swiper = new Swiper('.swiper-container', {
  navigation: {
    nextEl: '.swiper-button-next',
    prevEl: '.swiper-button-prev',
  }
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://unpkg.com/swiper/swiper-bundle.min.css">

<div class="layer"></div>

<script src="https://unpkg.com/swiper/swiper-bundle.min.js"></script>