jquery - jQuery切换类不适用于触摸设备

Question

我在触摸设备上使用 jQuery 苦苦挣扎。

我有一个切换翻转容器类“悬停”的事件。这应该调用 css 转换来翻转瓷砖。

单击鼠标时它可以正常工作，但不能触摸。在 iPhone 6S 上测试。

网站： https ://ganjaseeds.cz/o-nas/

代码：

HTML

<div class="flip-container">
<div class="flipper">
    <div class="front o-nas-4">
        <button class="o-nas-button o-nas-button-front"><img src="/wp-content/themes/favou/images/ikona_otaznik.png"></button>
        <h3>4 sliby, <br>za které <br>vám ručíme</h3>      
    </div>
    <div class="back">
        <button class="o-nas-button o-nas-button-back"><img src="/wp-content/themes/favou/images/ikona_krizek.png"></button>
        
        <ol>
            <li><b></b><span> Nebudeme nabízet žádná nestandardní a nekvalitní semínka. </span></li>
            <li><b></b><span> Vždy se snažíme o doručení zboží v co nejkratším čase. V případě komplikací vám dáme vědět. Bez okolků a na rovinu. </span></li>
            <li><b></b><span> Jakoukoliv námi způsobenou komplikaci vám vynahradíme. </span></li>
            <li><b></b><span> Nadále budeme aktivně vyhledávat a přidávat nové semenné banky a zlepšovat služby. </span></li>
        </ol>
    </div>
</div>

JS：

<script>
jQuery( document ).ready(function() {
    jQuery('.flip-container .flipper .front .o-nas-button-front').on('click touch', function() {
    jQuery(this).closest('.flip-container').toggleClass('hover');
});
jQuery('.flip-container .flipper .back .o-nas-button-back').on('click touch', function() {
    jQuery(this).closest('.flip-container').toggleClass('hover');
});
});
</script>

CSS（仅与变换有关）：

.flip-container.hover .flipper {
    transform: rotateY(180deg);
}

.flip-container,
.front,
.back {
    width: 500px;
    height: 300px;
}


/* flip speed */

.flipper {
    transition: 0.8s;
    transform-style: preserve-3d;
    position: relative;
}


/* hide back of pane during swap */

.front,
.back {
    backface-visibility: hidden;
    position: absolute;
    top: 0;
    left: 0;
    max-width: 100%;
}


/* front pane, placed above back */

.front {
    z-index: 2;
    transform: rotateY(0deg);
    background-color: #1CB573;
}


/* back, initially hidden pane */

.back {
    transform: rotateY(180deg);
    background-color: #1CB573;
    padding: 60px 60px 20px 20px;
}

有人可以指导我，我做错了什么？

感谢您的任何建议。

标签： jquerycsstouch-event