jQuery click事件似乎没有在移动浏览器中触发。
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有一个很好的答案。如果您想要一个不同的解决方案,为什么不修改您的代码,如下所示:
改变那个LI你遇到麻烦,包括A标签并在那里应用类而不是LI
<!-- 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;
});
});
这应该适用于您要做的事情。
此外,我注意到您的网站在新标签/窗口中打开其他链接,这是故意的吗?
我知道这是一个已经解决的老话题,但我刚刚回答了类似的问题,虽然我的回答可以帮助其他人,因为它涵盖了其他解决方案选项:
点击事件在启用触摸的设备上的工作方式稍有不同没有鼠标,所以从技术上讲没有点击。根据这篇文章 - 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
您可以使用jQuery Mobile vclick
事件:
用于处理触摸设备上的touchend或鼠标点击事件的规范化事件。
$(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中触摸和单击的解决方案(不使用jQuery Mobile)
让jQuery Mobile site build your download并将其添加到您的页面。要进行快速测试,您还可以使用下面提供的脚本。
接下来,我们可以使用以下代码段重新连接所有对$(...)。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>
Vohuman的回答引导我实现自己:
$(document).on("vclick", ".className", function() {
// Whatever you want to do
});
代替:
$(document).ready(function($) {
$('.className').click(function(){
// Whatever you want to do
});
});
我希望这有帮助!
使用此解决方案,您可以解决所有移动点击问题。仅使用“单击”功能,但将z-index:99添加到css中的元素:
$("#test").on('click', function(){
alert("CLICKED!")
});
#test{
z-index:99;
cursor:pointer;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<div id="test">CLICK ME</div>
信用:https://foundation.zurb.com/forum/posts/3258-buttons-not-clickable-on-iphone
我有同样的问题,并通过添加"mousedown touchstart"
修复它
$(document).on("mousedown touchstart", ".className", function() {
// your code here
});
而不是其他人