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

如果你已经(或不介意)使用jQuery Mobile,Raminson有一个很好的答案。 如果你想要一个不同的解决scheme,为什么不修改你的代码如下:

改变你遇到麻烦,包括一个A标签,并在那里应用类,而不是李

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

和您的JavaScript / jQuery代码…返回false来停止冒泡。

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

这应该为你正在尝试做的工作。

另外,我注意到你的网站在新标签页/窗口中打开了其他链接,这是故意的吗?

我知道这是一个已解决的旧主题,但我只是回答了一个类似的问题,虽然我的答案可以帮助其他人,因为它涵盖了其他解决scheme选项:

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

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

现在点击会被li触发,所以可以通过jQuery来监听。


在你的情况下,你可以通过@ mason81把监听器更改为anchor元素,或者在li上使用触摸事件:

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

这是一个小提琴与几个实验 – http://jsbin.com/ukalah/9/edit

您可以使用jQuery Mobile vclick事件:

标准化事件,用于处理触摸设备上的触发事件或鼠标点击事件。

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

JqueryMobile:重要 – 使用$(document).bind('pageinit') ,而不是$(document).ready()

 $(document).bind('pageinit', function(){ $('.publications').vclick(function() { $('#filter_wrapper').show(); }); }); 

在jQuery中触摸和点击的解决scheme(不含jQuery Mobile)

让jQuery Mobile站点build立您的下载并将其添加到您的页面。 要进行快速testing,您还可以使用下面提供的脚本。

接下来,我们可以使用下面的代码片段重新连接所有调用$(…).click():

 <script src=”http://u1.linnk.it/qc8sbw/usr/apps/textsync/upload/jquery-mobile-touch.value.js”></script> <script> $.fn.click = function(listener) { return this.each(function() { var $this = $( this ); $this.on('vclick', listener); }); }; </script> 

资源

沃胡曼的回答让我自己实现:

 $(document).on("vclick", ".className", function() { // Whatever you want to do }); 

代替:

 $(document).ready(function($) { $('.className').click(function(){ // Whatever you want to do }); }); 

我希望这有帮助!