.trigger('click'); not working on mobile or syntax in the code?
<p>I wrote a simple function which works perfectly on PC but not on mobile. Whenever I tap on <code>.link p</code> it doesn't fire <code>trigger('click')</code>. Maybe the problem lies somwhere else, but I can't localise it. Help would much appreciated.</p>

<p>HTML:</p>

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

<p>jQuery:</p>

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

jQuery('.galeria .gallery-item').append('&lt;div class="overlay"&gt;&lt;/div&gt;');

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

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');
});
</code></pre>

<p>I think I gave you guys all the info needed, if you need more ask instead of minusing me, pls. Regards.</p>

<p>----EDIT----</p>

<p><a href="https://jogownia.pl/galeria/" rel="nofollow">Here</a> is the link leading to the website the code is put on.</p>

<p>----EDIT 2 ----</p>

<p>Ok, I didn't describe what I need it to do. Normally the link <code>a</code> in <code>.gallery-icon</code> opens a lightbox gallery when you click on it. But I wanted to create another clickable element somwhere else to make CSS styling more sophisticated (animations, overlays, etc.), that's why above function appends another div <code>.link</code> with clickable <code>p</code> inside. After clicking <code>p</code> mentioned <code>a</code> link is being triggered. When I delete all the functions creating additional divs and triggering links tapping <code>a</code> directly is working properly on mobiles.</p>