Question

I have something like the code below:

$('[data-value]').each(function() {
            var $this = $(this);
            $this.val($this.data('value'));
});

with

<select data-value="14:00">
    <option>12:00</option>
    <option>13:00</option>
    <option>14:00</option>
    <option>15:00</option>
</select>

The goal is to easily pre-select the "data-value" in the list.

The code works perfectly except when I add select elements after the page initialization.

For example, this won’t work:

$('body').append('<select data-value=yellow><option>black</option><option>yellow</option><option>red</option></select>');

So how can I make it work even when I add DOM elements after the page initialization ?

Answer 1

Ok so you can use something like:

It checks for new select elements and if it finds some without class ‘processed’ it processes them.

function checkNewSelects() {
    $('select').not(".processed").each(function() {
        var $this = $(this);
        $this.val($this.data('value'));
        $this.addClass('processed');
    });
    setTimeout(checkNewSelects, 300);
}
setTimeout(checkNewSelects, 300);