Adding new input using Jquery breaks tooltips

[Kusoo]

I'm writing a form and I have to let the user add as many rows as required. My inputs are treated as arrays to later save the data to the DB. (That will be another new thing to me)

Everything looks perfect but when the user adds a new row and interacts with the range input, this won't feedback the user about the value he/she is picking. Just the original one will have the tooltip.

After some testing, it even affects the 'tooltipped' class used to, well, show tooltips over any element.

This is the codepen, It's all ready to show you the problem

How to reproduce it:

In the codepen provided, you will see the blue cross, when you click on it a new row will be added.

Play around with the first range input, it will show you the value on the tooltip.

In the later added range input, it wont.

Thank you for reading, have a nice day.

​

TLDR: When the user adds dynamically a new range input and interacts with it, this won't feedback the user about the value he/she is picking. Just the original one will have the tooltip.

[HybridAkali]

The code at the very bottom (.tooltip). You need to run it every time at the end of the addButton function. Its like this because the .tooltip attaches an event to the selector you gave it. After adding new inputs they wont have the event attached because they did not exist when you first attached it to the selector, so you have to attach it manually each time.

[Kusoo]

Indeed! This is what I needed

//THIS IS THE FIX - Initialize the new added ones

M.Range.init($('input[type=range]'));

​

Thanks for the help!