jQuery点击事件在移动浏览器中不起作用
jQuery点击事件似乎并没有在移动浏览器发射。
HTML如下所示:
<!-- This is the main menu --> <ul class="menu"> <li><a href="/home/">HOME</a></li> <li class="publications">PUBLICATIONS & 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 & 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 }); });
我希望这有帮助!