web-dev-qa-db-ja.com

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();
   });
 });

モバイルブラウザで「publications」リスト項目をクリックしても、何も起こりません。

ここでサイトを見ることができます： http://www.ruthcrocker.com/

JQueryモバイル固有のイベントがあるかどうかはわかりません。

jqueryandroidipadmobile
27
Jonathan Moriarty

既に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 &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;
   });
 });

これはあなたがやろうとしていることに対して機能するはずです。

また、あなたのサイトが他のリンクを新しいタブ/ウィンドウで開くことに気付きましたが、それは意図的なものですか？

27
mason81

これは解決された古いトピックであることを知っていますが、同様の質問に答えましたが、私の答えは他のソリューションオプションをカバーしているので他の人を助けることができます：

タッチ対応デバイスでは、クリックイベントの動作が少し異なります。マウスがないため、技術的にはクリックはありません。この記事によると 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

41
Hugo Silva

JQuery Mobileを使用できます vclick event：

タッチデバイスでタッチエンドまたはマウスクリックイベントを処理するための正規化されたイベント。

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

jQueryでタッチアンドクリックするソリューション（jQuery Mobileなし）

jQuery Mobileサイトがダウンロードをビルドする にして、ページに追加します。簡単なテストのために、以下のスクリプトを使用することもできます。

次に、次のスニペットを使用して、$（…）.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>

ソース

2
ucefkh

Vohumanの答えは、私自身の実装に私を導きました。

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

の代わりに：

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

これがお役に立てば幸いです！

1
Ralph David Abernathy

私は同じ問題を抱えていたので、_"mousedown touchstart"_を追加して修正しました

$(document).on("mousedown touchstart", ".className", function() { // your code here });

他の人に夢中

1
Samar Muhammad

このソリューションを使用すると、おそらくすべてのモバイルクリックの問題を解決できます。 「クリック」機能のみを使用しますが、CSSの要素にz-index：99を追加します。

  $("#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

1
PET