. Trigger ('click'); не работает на мобильный или синтаксис в коде?

Question

Я написал простую функцию, которая отлично работает на ПК, но не на мобильном устройстве. Всякий раз, когда я нажимаю на .link p, он не срабатывает trigger('click'). Может быть, проблема кроется где-то еще, но я не могу ее локализовать. Помощь была бы очень признательна.

HTML:

<div class="galeria"> 
<div class="gallery"> 
    <figure class="gallery-item"> 
     <div class="gallery-icon portrait"> 
      <a data-caption="" href=""> 
       <img/> 
      </a> 
     </div> 
     <figcaption class="wp-caption-text gallery-caption">Etykieta</figcaption> 
     <div class="overlay"></div> 
     <div class="link"> 
      <p>Whatever</p> 
     </div> 
    </figure> 
</div> 
</div> 

JQuery:

var $container = jQuery('.galeria') 
jQuery('.galeria').isotope({ 
itemSelector: '.galeria .gallery', 
layoutMode: 'masonry', 
}); 

jQuery('.galeria .gallery-item').append('<div class="overlay"></div>'); 

jQuery('.galeria .gallery').each(function() { 
var text = jQuery(this).find('.gallery-item:first-child .gallery-caption').text(); 
jQuery(this).find('.gallery-item').append('<div class="link"><p>'+text+'</p></div>'); 
}); 

var marginTop = jQuery('.link').height(); 
jQuery('.link').css('margin-top',-marginTop/2) 


// here is the function I'm concerned about, but maybe the problem is somwhere else 
jQuery('.link p').on('click touchstart',function() { 
jQuery(this).closest('.gallery-item').find('a').trigger('click'); 
}); 

Я думаю, что я дал вам, ребята, вся информация нужна, если вам нужно больше спросить вместо minusing меня, пожалуйста. С уважением.

---- EDIT ----

Here является ссылка, ведущая на сайт код надевается.

---- EDIT 2 ----

Хорошо, я не описать то, что мне нужно это делать. Обычно ссылка a в .gallery-icon открывает галерею лайтбоксов, когда вы нажимаете на нее. Но я хотел создать еще один элемент с интерактивным доступом, чтобы сделать стиль CSS более сложным (анимация, оверлеи и т. Д.), Поэтому функция выше добавляет еще один div .link с интерактивным p внутри. После нажатия p указанная ссылка a запускается. Когда я удаляю все функции, создающие дополнительные div и триггерные ссылки, нажимая a, прямо работает на мобильных телефонах.

Answer 1

Ваш код не заполнен, поэтому я могу ошибаться, когда пытаюсь его понять, но я думаю, что ваша проблема заключается в том, что вы пытаетесь вызвать событие «click» на элементе <a>, чтобы перенаправить пользователя на другую страницу.

Если вы имели в виду, чтобы сделать это, вы должны использовать следующий код (в вашей «нажмите touchstart» событие):

window.location.href = jQuery(this).closest('.gallery-item').find('a').attr('href'); 

- EDIT -

Как я проверил ваш сайт, возможно, что ваша ссылка (.link a) элемент не отображается на мобильных устройствах, поскольку он отображается только при наведении курсора .gallery-item.

Лучшее решение для мобильных устройств, чтобы назначить событие на элемент, который пользователь может видеть в браузере без зависания ничего (например. .gallery-пункт или .overlay).

- EDIT 2 -

Как я уже упоминал ранее, вы должны назначить событие на элемент, который пользователь может видеть в мобильном браузере без зависания над чем (как на мобильном браузере оно impssible).

Вы можете сделать это следующим образом:

jQuery('.gallery-item').on('click touchstart',function() { 
    jQuery(this).closest('.gallery-item').find('a').trigger('click'); 
}); 

если код не будет работать с .gallery-п, что вы должны использовать другой селектор, который указывает на элемент видимого пользователем и находится на вершине (над другими элементами на странице).