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

【问题标题】：Jquery click event not working on mobile deviceJquery点击事件在移动设备上不起作用
【发布时间】：2015-07-15 10:58:38
【问题描述】：

我正在尝试使以下 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

提前致谢。

【问题讨论】：

当前代码在我的 iPhone 上似乎可以正常工作。一个想法：我通常把e.preventDefault()放在函数的末尾。不过应该没什么区别。

标签： javascript jquery css jquery-mobile touch

【解决方案1】：

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

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

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

【讨论】：

【解决方案2】：

将光标：指针添加到你的类的属性，它应该可以在移动设备中找到

.用户导航{ 光标：指针 }

【讨论】：

【解决方案3】：

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

【讨论】：

由于已经有一个现有的、可接受的答案，最好的办法是添加一些解释，说明这如何比现有的更好地帮助 OP。只是在没有解释的情况下转储代码对未来的访问者没有帮助。此外，在最新版本的 jQuery 中，bind 已弃用 on。
这也将在触摸设备上触发两个事件，因为您将获得 touchstart 然后立即点击

【解决方案4】：

看起来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（根据您的小提琴），否则使用jQuery 1.7+，您可以使用.on，如下所示。

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

【讨论】：