爲什麼jQuery僅在加載停止時加載？

當我點擊一個產品時，我需要添加一個類:focus，因此在加載下一頁之前，您可以看到一個藍色的矩形。爲什麼jQuery僅在加載停止時加載？

我已經添加了一個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>

來源

2016-07-27 Sasha Chirico

DOM已經加載。您滾動查看產品，所以您點擊其中一個，並且應該加載Javascript ..（該DOM已經加載）僅適用於移動版本。桌面版本沒問題 –

或者您可以在關閉主體標籤之前將腳本放置在文檔的底部。 – Aziz

它的工作。你在期待什麼？ – Pugazh

試試這個。而不是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>

來源

2016-07-27 15:01:09 Pugazh

你可以嘗試的黑客，模擬使用的setTimeout假的延遲，進入下一個頁面之前（您可以根據您的要求進行校準的延遲，在樣本爲800毫秒）

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

Here a working jsfiddle

來源

2016-07-27 15:13:40 Luca

爲什麼jQuery僅在加載停止時加載？

回答

相關問題