如何重新初始化HTML文档中的脚本？(How to reinitialize a script in an HTML document?)

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

这是有问题的代码：

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

如果添加其他行，则弹出选择器不起作用。

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

（同样完整的披露，我先问过Reddit--因此这是一个交叉的帖子。

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:

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.

最满意答案

在他们的例子中，jscolor有一个名为“Instantiating new Color Pickers”，它会告诉你如何做到这一点。

您将新行添加为字符串，我不建议这样做，因为如果您使用jQuery单独创建每个输入，则仅在一个元素上调用jscolor()会更容易，但这也适用。

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

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

这是一个更新的小提琴

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

更多推荐