jQuery 单击事件在移动浏览器中不起作用 [英] jQuery click event not working in mobile browsers

问题描述

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

HTML 如下:

<ul class="菜单"><li><a href="/home/">HOME</a></li><li class="publications">PUBLICATIONS &amp;项目<li><a href="/about/">ABOUT</a></li><li><a href="/blog/">BLOG</a></li><li><a href="/contact/">CONTACT</a></li><!-- 这是点击时触发的子菜单--><div id="filter_wrapper"><ul id="portfolioFilter"><li><a href="/nutrition-related/">营养相关</a></li><li><a href="/essays/">散文和非小说类</a></li><li><a href="/commissioned/">委托作品</a></li><li><a href="/plays/">戏剧和表演</a></li><li><a href="/new-projects/">新项目</a></li>

这是移动端的 jQuery 脚本:

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

当我在移动浏览器上点击出版物"列表项时，没有任何反应.

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

不确定是否有 jQuery Mobile 特定事件.

解决方案

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

更改您遇到问题的 LI 以包含 A 标记并将类应用到那里而不是 LI

<ul class="菜单"><li><a href="/home/">HOME</a></li><li><a href="#" class="publications">PUBLICATIONS &amp;项目</a></li><li><a href="/about/">ABOUT</a></li><li><a href="/blog/">BLOG</a></li><li><a href="/contact/">CONTACT</a></li>

您的 javascript/jquery 代码...返回 false 以停止冒泡.

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

这应该适用于您正在尝试做的事情.

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

the jQuery click event does not seem to be firing in mobile browsers.

The HTML is as follows:

<!-- 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>

This is the jQuery script for mobile:

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

When I click the "publications" list item on a mobile browser nothing happens.

You can view the site here: http://www.ruthcrocker.com/

Not sure if there are jQuery mobile specific events.

解决方案

Raminson has a nice answer if you are already (or don't mind) using jQuery Mobile. If you want a different solution, why not just modify your code as follows:

change that LI you're having trouble with to include an A tag and apply the class there instead of the LI

<!-- 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>

And your javascript/jquery code... return false to stop bubbling.

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

This should work for what you are trying to do.

Also, I noticed your site opens the other links in new tabs/windows, is that intentional?

这篇关于jQuery 单击事件在移动浏览器中不起作用的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！