如何重新初始化 HTML 文档中的脚本？答案

【问题标题】：How to reinitialize a script in an HTML document?如何重新初始化 HTML 文档中的脚本？
【发布时间】：2017-04-02 23:52:31
【问题描述】：

我有一个使用jscolor.com 库的文档，供用户选择和存储颜色。我还使用 JQuery 函数向屏幕添加行，因此用户可以创建和定义多种颜色。问题是，当添加新行时，不会为添加的元素重新初始化 Javascript。

这里是有问题的代码：

<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>

我在JSFiddle 上做了一个简化的例子——你可以在第一行看到，如果你点击颜色单元格，它会给你一个弹出的调色板。

如果您添加额外的行，弹出选择器将不起作用。

但是，所有数据都正确存储在数据库中，所以我有一个实例，其中一些由 Javascript 添加的元素可以正常工作而其他元素不能正常工作？

（也完全披露，我首先在Reddit 上询问 - 因此这是一个交叉帖子。

【问题讨论】：

标签： javascript jquery jscolor

【解决方案1】：

在他们的examples 中，jscolor 有一个名为“实例化新的颜色选择器”的工具，它向您展示了如何做到这一点。

您将新行添加为字符串，我不建议这样做，因为如果您 created each input separately using jQuery 仅在一个元素上调用 jscolor() 会更容易，但这也有效。

只需将以下内容添加到您的点击处理程序中：

// 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);

这是更新后的fiddle

【讨论】：

您不必查询所有的选择器。我修改了你的fiddle here
我没有重新实例化所有的选择器，我只使用allInputs.length - 1 获得最新的选择器。然而，你的更简洁。我没有想到要在选择器的名称/ID 中使用索引

【解决方案2】：

一般 Abe Fehr 的回答对我也有帮助，但我还有其他问题。我的元素已经有了数据库中的默认值，所以

new jscolor(newestInput);

初始化它们，但默认使用 FFFFF

所以在我的例子中，twig (html) 看起来像这样：

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

然后我像这样重新初始化所有颜色：

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

    }

【讨论】：