в 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 для мобильных:

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

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

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

не уверен, есть ли конкретные события jQuery mobile.

23
android ipad jquery mobile

6 ответов

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

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

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

24

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

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

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

теперь щелчок будет вызван li, поэтому может быть прослушан jQuery.

в вашем случае вы можете просто изменить прослушиватель на элемент anchor, как очень хорошо поставленный @mason81, или использовать событие touch на ли:

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

вот скрипка с несколькими экспериментами -http://jsbin.com/ukalah/9/edit

37

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

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

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

JqueryMobile: Главное - Использовать $(document).bind('pageinit'), а не $(document).ready():

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

решение для касания и щелчка в jQuery (без jQuery Mobile)

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

Далее мы можем перепрограммировать все вызовы на $(...).нажмите (), используя следующий фрагмент:

<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

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

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

вместо:

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

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

1