javascript - Jquery 点击事件在移动设备上不起作用

Question

我正在尝试使下面的 JSFiddle 适用于平板电脑/移动设备(例如“触摸”以及“点击”)。

https://jsfiddle.net/lkw274/7zt1zL0g/87/

<小时/>

<div class="user-navigation">
        <a class="mobile-menu-new" href=""><span></span>Menu</a>
</div>

<小时/>

$(document).ready(function() {
$(".user-navigation a.mobile-menu-new").click(function (e) {
      e.preventDefault();
    $(".user-navigation a.mobile-menu-new").toggleClass("current");
    }); 
});

<小时/>

.current { background: #F00;}

<小时/>

预期行为:单击“菜单”时，无论是通过触摸还是用鼠标单击，背景都会突出显示为红色，直到在应该删除该类时再次单击它，删除红色背景并将其返回到原始状态。

当前行为:单击“菜单”时，通过触摸移动/平板电脑设备，背景会突出显示为红色，但第二次单击“菜单”时不会删除该类。

有人可以帮助理解如何针对平板电脑/移动设备修改此代码吗？

我已经尝试了下面 StackOverflow 链接中的解决方案，但是一旦实现，该解决方案在点击时不起作用。

document-click-function-for-touch-device

提前致谢。

Answer 1

看起来像event delegation是执行此操作的方法，因为当您修改目标元素时，绑定(bind)似乎会失败。

尝试以下操作(适用于我的 iPhone/Chrome)。

$(document).ready(function() {
    $(".user-navigation").delegate("a.mobile-menu-new", "click", function (e) {
        e.preventDefault();
        $(this).toggleClass("current");
    });
});

请注意，我已经使用了.delegate，因为您似乎正在使用jQuery 1.6(根据您的 fiddle )，否则，使用jQuery 1.7+，您可以使用 .on像下面这样。

$(document).ready(function() {
    $(".user-navigation").on("click", "a.mobile-menu-new", function (e) {
        e.preventDefault();
        $(this).toggleClass("current");
    });
});