使用delegate（）新添加的元素不会绑定jscolor.js [英] Newly added elements using delegate() won't bind jscolor.js

问题描述

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

I have a simple form, where each line consists of 3 input fields. on one of those fields, I use jscolor.js (field has a class="color" and thus binds the JS).

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

However, when I add new lines using jQuery's delegate(), the input field doesn't bind the JS and the expected functionality is not there. 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>

我认为问题出在：

• 我如何定义行变量，或


• 我正在使用不正确的选择器 .delegate ，所以它应该是别的而不是表格 ..？

• how I define the line variable, or
• I'm using an improper selector with .delegate, so it should be something else and not form..?

非常感谢任何帮助。

推荐答案

您的代码有几个问题：

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

1. You are using IDs in your "line" variable. ID must be unique within an HTML document. You'd better use name attributes, or create a new line differently so you can change the IDs.

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

Why do you delegate the 'click' event for the 'Add' button ? Event delegation is used be able to automatically "bind" events to elements created dynamically. In your example, the "Add" button, is static to the page, you don't need to use delegate, simply .click() or .bind().

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

After creating the new line, you have to explicitly initialize your jscolor on the new field, it's not going to happen automatically. When your page is first parsed, the existing <input class="color" /> are initialized by the jscolor plugin, but insterted elements afterwards are not anymore, the script has run already.

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

Here's some modified code:

<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 进行测试。

这篇关于使用delegate（）新添加的元素不会绑定jscolor.js的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！