Событие jQuery click не работает в мобильных браузерах

событие jQuery click не работает в мобильных браузерах.

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 script для мобильных устройств:

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

Когда я нажимаю элемент списка "публикации" в мобильном браузере, ничего не происходит.

Вы можете посмотреть сайт здесь: http://www.ruthcrocker.com/

Не уверен, что существуют конкретные события jQuery для мобильных устройств.

Ответ 1

У Raminson есть хороший ответ, если вы уже (или не против) используете jQuery Mobile. Если вы хотите другое решение, почему бы не просто изменить свой код следующим образом:

измените, что у 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;
   });
 });

Это должно работать на то, что вы пытаетесь сделать.

Кроме того, я заметил, что ваш сайт открывает другие ссылки в новых вкладках/окнах, является ли это намеренным?

Ответ 2

Я знаю, что это разрешенная старая тема, но я просто ответил на аналогичный вопрос, и хотя мой ответ мог помочь кому-то другому, поскольку он охватывает другие варианты решения:

События click работают немного по-разному на устройствах с сенсорным экраном. Нет мыши, поэтому технически нет щелчка. Согласно этой статье - http://www.quirksmode.org/blog/archives/2010/09/click_event_del.html - из-за ограничений памяти события click только эмулируются и отправляются из элементов привязки и ввода. Любой другой элемент может использовать события касания или вручную инициализировать события щелчка, добавив обработчик к элементу raw 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

Ответ 3

Вы можете использовать jQuery Mobile vclick событие:

Нормализованное событие для обработки touchhend или событий щелчка мыши на сенсорных устройствах.

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

Ответ 4

JQueryMobile: Важно - используйте $(document).bind('pageinit'), а не $(document).ready():

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

Ответ 5

Решение для Touch и Click в jQuery (без jQuery Mobile)

Пусть сайт jQuery Mobile создаст вашу загрузку и добавит его на вашу страницу. Для быстрого тестирования вы также можете использовать script, приведенный ниже.

Затем мы можем переписать все вызовы на $(...).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>

источник

Ответ 6

Ответ Vohuman приведет меня к моей собственной реализации:

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

Вместо:

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

Надеюсь, это поможет!

Ответ 7

У меня была та же проблема, и я исправил ее, добавив "mousedown touchstart"

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

вложенный в других

Ответ 8

С помощью этого решения вы, вероятно, сможете решить все проблемы, связанные с кликами на мобильных устройствах. Используйте только функцию "click", но добавьте 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>