Interactions don't work when element is dinamycally added through javascript

Design help Custom code
1

I have a products loop and in each product has a hover interaction. When the cursor hover a image, the price should appear.

It’s works fine, but when i click on the LOAD MORE button, more products are loaded in the page, but the hover stop work in the news products.

How can i solve this issue?

I tried to trigger webflow interactions, but i don’t had any success. See what i tried

var ix = Webflow.require(‘ix’);
var $el = $(‘.new-interaction’);

var trigger = [{"type":"hover","selector":".imagemcategoria2","descend":true,"stepsA":[{"opacity":1,"transition":"opacity 200 ease 0"}],"stepsB":[{"opacity":0,"transition":"opacity 200 ease 0"}]},{"type":"hover","selector":".hoverdiv","descend":true,"stepsA":[{"opacity":1,"transition":"opacity 200 ease 0"}],"stepsB":[{"opacity":0,"transition":"opacity 200 ease 0"}]},{"type":"hover","selector":".imagemcategoria","descend":true,"stepsA":[{"opacity":0,"transition":"opacity 200 ease 0"}],"stepsB":[{"opacity":1,"transition":"opacity 200 ease 0"}]}];

ix.run(trigger, $el);

See the website: https://www.mesclado.com.br/produtos

2

I don’t think there is any way to bind Webflow interactions to new elements, as Webflow evaluates the page element during page load.

You could convert the interactions to plain JavaScript custom code, then bind the events using jQuery’s .on()

Also, feel free to contact me for further code help and/or customization of third-party plugins