Warum jQuery nur laden, wenn das Laden gestoppt wird?

Question

Ich muss eine Klasse :focus hinzufügen, wenn ich auf ein Produkt klicke, bevor Sie die nächste Seite laden, sehen Sie ein blaues Rechteck.

Ich habe eine jQuery dazu hinzugefügt. Wenn Sie also auf ein Produkt klicken, wird die Klasse geändert und eine neue Klasse mit einem Feldschatten hinzugefügt.

Aber es funktioniert nur auf dem Desktop nicht auf mobilen Geräten.

$(document).ready(function() { 
 
    $('div.product-container').on('click', function() { 
 
    $(this).addClass('aftertap'); 
 
    }); 
 
});

.aftertap { 
 
    -webkit-box-shadow: 0px 0px 12px 3px rgba(113, 129, 194, 1) !important; 
 
    -moz-box-shadow: 0px 0px 12px 3px rgba(113, 129, 194, 1) !important; 
 
    box-shadow: 0px 0px 12px 3px rgba(113, 129, 194, 1) !important; 
 
}

<div class="product-container style1 clearfix" itemscope="" itemtype="http://schema.org/Product"> 
 
    <div class="left-block"> 
 

 
    <div class="product-image-container"> 
 

 
     <a class="product_img_link" href="http://localhost/prestawebserver/forward/102-cropped-leggings-performance-cotton.html" title="Cropped Leggings - Performance Cotton" itemprop="url"> 
 
     <img class=" img-responsive" src="http://localhost/prestawebserver/1065-home_default/cropped-leggings-performance-cotton.jpg" alt="cropped-leggings-performance-cotton" title="cropped-leggings-performance-cotton" itemprop="image"> 
 
     </a> 
 
    </div> 
 
    </div>

Answer 1

bereits. Statt div 's click Ereignis, tun Sie es auf Anker Klickereignis.

$(document).ready(function() { 
 
    $('a.product_img_link').on('click', function() { 
 
    $(this).parents('div.product-container').addClass('aftertap'); 
 
    }); 
 
});

.aftertap { 
 
    -webkit-box-shadow: 0px 0px 12px 3px rgba(113, 129, 194, 1) !important; 
 
    -moz-box-shadow: 0px 0px 12px 3px rgba(113, 129, 194, 1) !important; 
 
    box-shadow: 0px 0px 12px 3px rgba(113, 129, 194, 1) !important; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="product-container" tabindex="1"> 
 
    <a class="product_img_link" href="http://localhost/prestawebserver/forward/102-cropped-leggings-performance-cotton.html" title="Cropped Leggings - Performance Cotton" itemprop="url"> 
 
    <img class=" img-responsive" src="http://localhost/prestawebserver/1065-home_default/cropped-leggings-performance-cotton.jpg" alt="cropped-leggings-performance-cotton" title="cropped-leggings-performance-cotton" itemprop="image"> 
 
    </a> 
 
</div>

Answer 2

Sie könnten einen Hack versuchen, eine gefälschte Verzögerung simuliert setTimeout verwenden, gehen Sie vor zur nächsten Seite (Sie Verzögerung in Abhängigkeit Ihrer Anforderungen kalibrieren können, in die Probe 800 Millisekunden)

$('div.product-container').on('click', function(){ 
    $(this).addClass('aftertap'); 
    setTimeout(function(){ 
     $(this).closest('a').click(); 
     },800); 
}); 

Here a working jsfiddle