I added some JavaScript code in to Prestahop's 1.7 custom.js file because I wanted to change the class of the category product's div on hover. The code works but if I load the next category or choose any filter from the layered navigation the code stops working and it works only if I reload the page. I guess it has to do with the Ajax call for loading the results and the next category but I'm not very good with JavaScript. Any idea on how I could make the code to work after the loading of new category or filter results? Any help will be appreciated.
$(".product-box").hover(function(){
$(this).addClass("current");
},function(){
$(this).removeClass("current");
});
Like mentioned by DustInCompetent, if its simply to add some css styling to it, you can achieve it by using .product-box:hover.
If your going to want to do JS stuff as well, odds are the .product-box are being loaded dynamically. So your .hover function wont work for new elements added to the DOM. You could use something like this :
$(document).on({
mouseenter: function () {
//stuff to do on mouse enter
},
mouseleave: function () {
//stuff to do on mouse leave
}
}, ".product-box"); //pass the element as an argument to .on