使用delegate（）新添加的元素不会绑定jscolor.js

我有一个简单的表单，其中每行包含3个输入字段。 在其中一个字段中，我使用jscolor.js（字段有一个class="color" ，从而绑定JS）。

但是，当我使用jQuery的delegate()添加新行时，输入字段不绑定JS，并且不存在预期的function。 http://jsfiddle.net/alexwald/qARzP/

  var line = '
  Item:    Amount:     Color:    
'; $(document).ready(function() { $("form").delegate(".add", "click", function(){ $('ul').append(line); }); // end of adding }); //end of main func  

我认为问题出在：

• 我如何定义line变量，或
• 我正在使用带有.delegate的不正确的选择器，所以它应该是别的而不是form ……？

任何帮助非常感谢。

Answer 1

您的代码有几个问题：

1. 您在“line”变量中使用ID。 ID必须在HTML文档中是唯一的。 您最好使用名称属性，或以不同方式创建新行，以便更改ID。

2. 为什么要为“添加”按钮委派“点击”事件？ 事件委托使用能够自动将事件“绑定”到动态创建的元素。 在您的示例中，“添加”按钮对页面是静态的，您不需要使用委托，只需.click（）或.bind（）。

3. 创建新行后，您必须在新字段上显式初始化jscolor，它不会自动发生。 当您的页面首次被解析时，现有的由jscolor插件初始化，但之后的insterted元素不再存在，脚本已经运行。

这是一些修改过的代码：

这个jsfiddle用于测试。

Answer 2

您可以通过在append事件中重新初始化jscolor对象来解决此问题。

 $("body").on('click', 'div .add', function(){ $("#some-id").append(''); new jscolor.init(); }); 

Answer 3

没有其他解决方案适合我。

以下解决方案适合我。
只需通过在javascript中传递输入元素对象来创建新的jscolor对象 。

 var picker = new jscolor($li.find('.jscolor')[0]); 

参考http://jscolor.com/examples/转到实例化新的颜色选择器部分。