Javacsript not working after loading new category

Question

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");
});

Answer 1

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