javascript - 如何重新初始化 HTML 文档中的脚本？

Question

我有一个使用 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 上询问 - 因此这是一个交叉帖子。

Answer 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