ロードが停止しているときにjQueryがロードされるのはなぜですか？

Question

製品をクリックするときにクラス:focusを追加する必要があるため、次のページを読み込む前に青色の四角形が表示されます。

jQueryを追加しました。製品をクリックすると、クラスが変更され、ボックスシャドウの新しいクラスが追加されます。

ただし、携帯端末ではなくデスクトップでのみ動作します。

$(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

これを試してみてください。 divのclickイベントの代わりに、アンカーのクリックイベントで実行します。

$(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

あなたは

（あなたがサンプルで、あなたの要件に応じて、遅延を校正することができます800ミリ秒である）の前に次のページに進み、setTimeoutメソッドを使用して偽の遅延をシミュレートし、ハッキングを試みることができます

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

Here a working jsfiddle