危险的刷卡器不刷卡

Question

我目前遇到了危险刷卡器的问题。我使用该顺序中包含的以下库：

jQuery 1.9.1
jQuery 移动版 1.4.5
危险的刷卡器 (jQuery) 3.0.6

在通过 javascript 将刷卡器添加到 DOM 之前，我正在修改它以满足我的需要。

最后会生成以下 html 代码，它应该符合 api 的需要：

<div class="tx-cctest-pi1">
        <div class="cctest-gallery-link" id="pageId-13">
            <div class="swiper-13 swiper-container">
               <div class="swiper-wrapper">
                  <div class="swiper-slide">
                      <img src="uploads/tx_cctest/bild1.jpg">
                  </div>
                  <div class="swiper-slide">
                      <img src="uploads/tx_cctest/bild2.jpg">
                  </div>
                  <div class="swiper-slide">
                      <img src="uploads/tx_cctest/bild3.jpg">
                  </div>
                  <div class="swiper-slide">
                      <img src="uploads/tx_cctest/bild4.jpg">
                  </div>
               </div>
            </div>
            <div class="albumName">Architektur</div>
        </div>
</div>

代码是动态生成的，应该会生成多个滑动器（因此 class 名称 swiper-X）。

添加滑动条到元素的代码如下：

new Swiper('.swiper-'+ pageId, {
    direction: 'horizontal',
    loop: true,
    preloadImages: true,
    updateOnImagesReady: true,
    grabCursor: true
});

控制台没有报错，刷机不刷

更新问题解决了。在 enigma 后检查代码证明代码似乎在没有 AJAX 的情况下也能正常工作。正如在 enigma 的 post 下面的评论中提到的，问题是 ajax 调用甚至没有完成，但刷卡器已经创建。因此，将 Swiper 构造放在 $.ajax 的 done() 回调中，一切正常。

Answer 1

根据您问题中的代码，以及您确定页面 ID 正确的事实，我生成了 this JSfiddle，这表明它可以完美运行。错误显然不在引用的代码中。

查看您评论中的codepen，有些错误很明显：

<div class="test"-gallery-link link-left" id="pageId-13">应该是 <div class="test-gallery-link link-left" id="pageId-13">，注意删除的 "
末尾多了一个不必要的</div>
在回调中，this 指的是 Ajax 调用的 jqXHR object，而不是事件处理程序绑定到的元素。所以 $(this) 可能没有按照你的想法去做。我通过硬编码 url 而不是使用 var url = $(this).attr('src'); 来修复此问题，您可能希望通过在进入 ajax 调用之前存储 $(this) 来修复它。

解决这些问题后，我将您所有的代码笔代码放入带有正确链接库的 JSfiddle 中，并删除了移动检查和 ajax 调用（直接跳到 done()）。

进行上述更改后，the JSfiddle 似乎大致按照您希望的方式进行。

危险的刷卡器不刷卡

Idangerous Swiper not swiping

javascript

jquery

swiper