How to reinitialize a script in an HTML document?

Question

I have a document that uses the jscolor.com library, for the user to be able to select and store a color. I'm also using a JQuery function to add rows to the screen, so the user can create and define a number of colors. The problem is, when the new row is added, the Javascript isn't re-initialized for the added elements.

Here is the code in question:

<script type="text/javascript">
$(document).ready(function(){
    var i=1;
    $("#add_row").click(function(){
        $('#addr'+i).html("<div id='addr" + i + "'>" +
            "<div class='col-xs-4'>" +
            "<input type='text' name='config_color[" + i + "][css]' id='input-color[" + i + "][css]' class='form-control' />" +
            "</div>" +
            "<div class='col-xs-2'>" +
            "<input type='text' name='config_color[" + i + "][value]' id='input-color[" + i + "][value]' class='form-control jscolor' />" +
            "</div>" +
            "<div class='col-xs-2'>" +
            "<input type='text' name='config_color[" + i + "][default]' id='input-color[" + i + "][default]' class='form-control' />" +
            "</div>" +
            "<div class='col-xs-4'>" +
            "<input type='text' name='config_color[" + i + "][notes]' id='input-color[" + i + "][notes]' class='form-control' />" +
            "</div>" +
            "</div>");

        $('#tab_logic').append('<div id="addr'+(i+1)+'"></div>');
        i++;
    });
    $("#delete_row").click(function(){
        if(i>1){
            $("#addr"+(i-1)).html('');
            i--;
        }
    });
}).trigger('change');
</script>

I've made an simplified example of what I'm talking about on JSFiddle - you can see in the first row, if you click in the color cell, it gives you a pop up color palette.

If you add additional rows, the popup picker doesn't work.

However, all of the data stores in the database properly, so i have an instance where some elements added by Javascript work properly and others don't?

(Also full disclosure, I asked on Reddit first - this is therefore a cross-post.

score 2 · Accepted Answer · edited May 23 '17 at 11:46

2

In their examples, jscolor has one called "Instantiating new Color Pickers" which shows you how to do it.

You're adding the new row as a string, which I wouldn't recommend, because if you created each input separately using jQuery it would be easier to call jscolor() on only one element, but this works too.

Just add the following to your click handler:

// Get all the inputs first
var allInputs = $('.jscolor');

// From there, get the newest one
var newestInput = allInputs[allInputs.length - 1]; 

// And call jscolor() on it!
new jscolor(newestInput);

Here's an updated fiddle

edited May 23 '17 at 11:46

Community

1
1

answered Apr 03 '17 at 00:13

Abe Fehr

729
9
23

1

You don't have to query all pickers. I've modified your [fiddle here](https://jsfiddle.net/71crdj4r/2/) – Stubbies Apr 03 '17 at 00:20
2

I didn't reinstantiate all pickers, I only get the newest picker with `allInputs.length - 1`. Yours, however, is more succinct. I didn't think to use the index in the name/ID in the selector – Abe Fehr Apr 03 '17 at 00:21

score 0 · Answer 2 · answered Jun 10 '19 at 07:08

Generally Abe Fehr answer helped me too, but i had slightly other problem. My elements already had default values from database so

new jscolor(newestInput);

initialized them but with default FFFFF

So in my case twig (html) looks like this:

<button class="jscolor {value:'{{ category.color }}'} btn btn-sm disabled color-picker" data-color="{{ category.color }}"></button>

And then I reinitialize all the colors like this:

    let all_pickers = $('.color-picker');

    if ($(all_pickers).length !== 0) {

        $(all_pickers).each((index, element) => {
            let color = $(element).attr('data-color');
            new jscolor(element, {'value': color});
        });

    }

How to reinitialize a script in an HTML document?

2 Answers2

Linked