Question

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

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

<script>
var line = '<li class="form_line" id="line">    
              <span>
                <label for="item">Item:</label>
                <input type="text" required="required" placeholder="what item is this?" id="item" name="item[]>
              </span>
              <span>
                <label for="amount">Amount: </label>
                <input required="required"  type="number" id="amount" name="amount[]>
              </span>
              <span>
                <label for="color">Color: </label>
                <input type="text" required="required" class="color {pickerClosable:true, hash:true ,pickerFace:3,pickerBorder:0}" id="color" name="color[]">
              </span>
            </li>';

$(document).ready(function() {          
  $("form").delegate(".add", "click", function(){        
    $('ul').append(line); 
  }); // end of adding                              
}); //end of main func 
</script>

我认为问题出在：

我如何定义line变量或
我正在使用.delegate的不当选择器，所以它应该是其他内容而不是form ..？

非常感谢任何帮助。

Answer 1

您的代码有几个问题：

您在“line”变量中使用ID。 ID必须在HTML文档中是唯一的。您最好使用名称属性，或以不同方式创建新行，以便更改ID。
为什么要为“添加”按钮委派“点击”事件？事件委托用于能够自动将事件“绑定”到动态创建的元素。在您的示例中，“添加”按钮对页面是静态的，您不需要使用委托，只需.click（）或.bind（）。
创建新行后，您必须在新字段上显式初始化jscolor，它不会自动发生。当您的页面首次被解析时，现有的<input class="color" />由jscolor插件初始化，但之后的后续元素不再存在，脚本已经运行。

以下是一些经过修改的代码：

<script> 
    var line = '<li class="form_line" id="line"><span><label>Item:</label><input type="text" required="required" placeholder="what item is this?" name="item"></span><span><label>Amount: </label><input required="required" type="number" name="amount"></span><span><label>Color: </label><input type="text" required="required" class="color {pickerClosable:true, hash:true ,pickerFace:3,pickerBorder:0}" name="color"></span></li>';

    $(document).ready(function() {

       var $ul = $('#formulario'); // the UL, select it once and r-use this selection

       $('.add').click(function(e) {
           var $line = $(line);
           $line.appendTo($ul);

           // initialize the new jscolor instance
           new jscolor.color($line.find('input[name=color]')[0], {});

       });


    }); //end of main func 
</script>

此jsfiddle用于测试。

Answer 2

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

$("body").on('click', 'div .add', function(){
     $("#some-id").append('<input type="text" name="color" class="color">');
     new jscolor.init();
});

Answer 3

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

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

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

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

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

3 个答案: