2017-01-14 24 views
0

モバイルでクリックが動作しないのはなぜですか? PC上で動作するjQuery on click doesnt work on mobile

他にもいくつかの質問がありましたが、答えはありません。私はのonclick =追加することによって、素子クリッカブルを製造しようとした "ボイド(0)"は、HREFを加え、touchendtouchstartを加えました。何も役立ちません。

$('.size-list-item').on('click touchend', function(event) { 
 
    event.preventDefault(); 
 

 
    $(".size-list-item").removeClass('active'); 
 
    $(this).toggleClass('active'); 
 
})
.active { 
 
    font-size: 25px; 
 
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 

 
<div class="menu-list size-list-items"> 
 
    <a class="size-list-item" data-type="25m2" href="#000" onclick="void(0)">25м2</a> 
 
    <a class="size-list-item active" data-type="50m2" href="#000" onclick="void(0)">50м2</a> 
 
    <a class="size-list-item" data-type="80m2" href="#000" onclick="void(0)">80м2</a> 
 
</div>

+1

あなたがこれを参照することができ、あなたの問題を解決するためにこれを使用**のhttp://api.jquerymobile.com/vclick/** –

+0

SOA#1。 Android 6とChrome 55を搭載したLG G2で完璧に動作します。何がどこで動作しないのか正確に教えていただけますか? –

+0

これはもう少し複雑になってしまい、私は非常に混乱しているhttp://stackoverflow.com/questions/41655144/jquery-on-click-does-not-work-with-let-variable-declaration-but-wo –

答えて

0

クラスを削除してから、同じ要素にクラスを追加しているので、それは動作しません。だからそれを取り消す。また、 "touchend"ではなく "touchstart"を追加してみてください。

また、要素にonclick = "void()"があるため、この要素のすべてのクリックが機能しないので、その要素は存在してはいけません。

+0

間違っています。クラスはすべての '.size-list-item'要素から削除されます。その後、クリックされた要素に再び追加されます。著者は要素が特定のクラスを持っているかどうかをチェックし、そうでないときにそれを追加する 'toggleClass'を使います。だからここで何も打ち消しません。私たちが意図的に削除するときにクラスが適用されているかどうかをチェックする必要がないので、彼は 'addClass'を使うことができます。 –

+0

それは間違っていません。 toggleClassは、既存のクラスの内容を変更します。ポイント:$( "。size-list-item")。removeClass( 'active');クラスはなくなった。その後、 - $(this).toggleClass( 'active');を実行します。 'this'は$( "。size-list-item")を参照しているため、再度追加します –

+0

これはまさに著者が望むものです。クリックされた要素を '.active'としてマークするには、** all **以前のアクティブな要素からクラスを削除してから**選択した要素にクラスを追加する必要があります。 ;-) –

0

問題はクリックではなく、正常に動作しています。 WKWebViewでは、スケーリングや一般的なサイジングを制御する場合は、ビューポートを設定する必要があります。ただ、それが正常に動作しますあなたのhtmlでこれを置く:

<meta name="viewport" content="initial-scale=1.0" />