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

Question

我正在尝试让下面的 JSFiddle 适用于 tablet/mobile 设备（例如 'on touch' 以及 'click'）。

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;}

预期行为： 单击 'Menu' 时，无论是通过触摸还是用鼠标单击，背景都会突出显示为红色，直到再次单击它时 class 应该被删除，删除红色背景并将其恢复到原始状态。

当前行为： 单击 'Menu' 时，通过触摸 mobile/tablet 设备，背景会突出显示为红色，但是当第二次单击 'menu' 时，class 不会被删除。

任何人都可以帮助理解如何为 tablet/mobile 设备修改此代码吗？

我已经尝试了下面 Whosebug link 中的解决方案，但是一旦实现，点击后它就不起作用了。

document-click-function-for-touch-device

提前致谢。

Answer 1

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

尝试以下操作（适用于我的 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");
    });
});

Answer 2

$(selector).bind("click touchstart", function(){
       .......
});

Answer 3

将 cursor:pointer 添加到 class 的属性中，它应该可以在移动

中找到

.user-navigation{ cursor:pointer }

Answer 4

嗯，在现代 jQuery 版本中，我想是这样的：

    $(document).on('click','selector', function(e){
        e.preventDefault();
        your code here
    });

...对移动设备有用...

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

Jquery click event not working on mobile device

javascript

jquery

css

jquery-mobile

touch