jQuery點擊事件在移動瀏覽器中不起作用

Question

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

Answer 1

Raminson具有使用jQuery Mobile的，如果你已經（或不介意）一個很好的答案。如果你想要一個不同的解決方案，爲什麼不修改代碼如下：李國能，你遇到麻煩

變化爲包括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; 
    }); 
}); 

這應該適用於您正在嘗試做的事情。

此外，我注意到您的網站打開新標籤頁/窗口中的其他鏈接，是故意的嗎？

Answer 2

您可以使用jQuery Mobile的vclick事件：

歸事件在觸摸設備上處理touchend或鼠標點擊事件。

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

Answer 3

JqueryMobile：重要 - 使用$(document).bind('pageinit')，不$(document).ready()：

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

Answer 4

我知道這是一個解決的老話題，但我剛纔已經回答了類似的問題，雖然我的回答能幫助別人的它涵蓋了其他解決方案選項：

點擊事件在支持觸摸的設備上有點不同。沒有鼠標，所以技術上沒有點擊。 根據這篇文章 - http://www.quirksmode.org/blog/archives/2010/09/click_event_del.html - 由於內存限制，點擊事件只是模擬並從錨點和輸入元素分派。任何其他元素可以使用觸摸事件，或者通過增加處理器的原始的HTML元素，例如人工初始化點擊事件，迫使點擊列表中的項目事件：

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

現在點擊將由李觸發，因此可以被jQuery收聽。

---

在你的情況，你可以只改變聽者通過@ mason81非常好放在錨元素，或在黎使用觸摸事件：

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

這裏是一個小提琴一些實驗 - http://jsbin.com/ukalah/9/edit

Answer 5

一個解決方案，以觸摸和點擊的jQuery（不jQuery Mobile的）

讓jQuery Mobile site build your download並將其添加到您的頁面。要進行快速測試，您還可以使用下面提供的腳本。

接下來，我們可以使用下面的代碼片段重新連接到$（...）。點擊（）所有來電：

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

source

Answer 6

Vohuman的答案會讓我在自己的實現：

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

而不是：

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

我希望這有助於！