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

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

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 移动特定事件。

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

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

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

现在点击将由li触发，因此可以被jQuery监听。

对于您的情况，您可以将侦听器更改为锚元素，就像 @mason81 提出的那样，或者在 li 上使用触摸事件：

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

这是一些实验的小提琴 -http://jsbin.com/ukalah/9/edit