jQuery单击事件在移动浏览器中不起作用

Question

jQuery click 事件似乎没有在移动浏览器中触发。

HTML如下:

<!-- This is the main menu -->
<ul class="menu">
   <li><a href="/home/">HOME</a></li>
   <li class="publications">PUBLICATIONS &amp; PROJECTS</li>
   <li><a href="/about/">ABOUT</a></li>
   <li><a href="/blog/">BLOG</a></li>
   <li><a href="/contact/">CONTACT</a></li>
 </ul>


 <!-- This is the sub-menu that is to be fired on click -->
 <div id="filter_wrapper">
   <ul id="portfolioFilter">
      <li><a href="/nutrition-related/">Nutrition related</a></li>
      <li><a href="/essays/">Essays and Nonfiction</a></li>
      <li><a href="/commissioned/">Commissioned works</a></li>
      <li><a href="/plays/">Plays and performance</a></li>
      <li><a href="/new-projects/">New Projects</a></li>
    </ul>
  </div>

这是移动端的 jQuery 脚本:

$(document).ready(function(){
   $('.publications').click(function() {
       $('#filter_wrapper').show();
   });
 });

当我在移动浏览器上单击“出版物”列表项时，没有任何反应。

您可以在此处查看该网站:http://www.ruthcrocker.com/

不确定是否有 jQuery 移动特定事件。

Answer 1

我知道这是一个已解决的老话题，但我刚刚回答了一个类似的问题，尽管我的回答可以帮助其他人，因为它涵盖了其他解决方案:

点击事件在支持触控的设备上的工作方式略有不同。没有鼠标，所以技术上没有点击。根据这篇文章 - http://www.quirksmode.org/blog/archives/2010/09/click_event_del.html - 由于内存限制，点击事件只能从 anchor 和输入元素模拟和分派(dispatch)。任何其他元素都可以使用触摸事件，或者通过向原始 html 元素添加处理程序来手动初始化点击事件，例如，强制列表项上的点击事件:

$('li').each(function(){
    this.onclick = function() {}
});

现在点击会被li触发，所以可以被jQuery监听。

---

在您的情况下，您可以将监听器更改为@mason81 所说的非常好的 anchor 元素，或者在 li 上使用触摸事件:

$('.menu').on('touchstart', '.publications', function(){
    $('#filter_wrapper').show();
});

这里是一些实验的 fiddle - http://jsbin.com/ukalah/9/edit