Los elementos recién agregados usando delegate() no vincularán jscolor.js

Question

Tengo un formulario simple, donde cada línea consta de 3 campos de entrada. en uno de esos campos, uso jscolor.js (el campo tiene un class="color" y por lo tanto une el JS).

Sin embargo, cuando agrego líneas nuevas usando jQuery's delegate(), el campo de entrada no vincula el JS y la funcionalidad esperada no está allí. 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> 

Creo que el problema está en:

• cómo definir la variable line, o
• estoy usando un selector impropia con .delegate, por lo que debería ser algo más y no form ..?

Cualquier ayuda muy apreciada.

Answer 1

Hay varios problemas con su código:

1. Está utilizando identificadores en su "línea" variable. La identificación debe ser única dentro de un documento HTML. Será mejor que use atributos de nombre, o cree una nueva línea de manera diferente para que pueda cambiar los ID.

2. ¿Por qué delega el evento 'clic' para el botón 'Agregar'? La delegación de eventos se usa para poder "vincular" eventos a elementos creados dinámicamente. En su ejemplo, el botón "Agregar", es estático para la página, no necesita usar delegar, simplemente .click() o .bind().

3. Después de crear la nueva línea, tiene que inicializar explícitamente su jscolor en el nuevo campo, no va a suceder automáticamente. Cuando su página se analiza por primera vez, el <input class="color" /> existente se inicializa con el complemento jscolor, pero los elementos insertados posteriormente ya no lo son, el script ya se ejecutó.

Aquí hay un código modificado:

<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> 

Y esto jsfiddle para la prueba.

Answer 2

Puede resolver esto reinicializando el objeto jscolor en el evento append.

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

Answer 3

Ninguna otra solución funciona para mí.

La siguiente solución funciona para mí.
Solo crear nuevo objeto jscolor por pasando elemento de entrada objeto en javascript.

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

de referencia desde http://jscolor.com/examples/ ir a Instanciando nuevos selectores de color sección.