Сборщик цветов, не добавляющий в динамическую таблицу HTML

Question

Im пытается добавить подборщик цветов в HTML, но не работает.

скрипку:

https://jsfiddle.net/csgn6051/2/

Вот мой код:

HTML

<button id="add"> 
    Add to table 
</button> 
</button> 
<table id="points-table" border="1"> 
    <tr> 
    <td>line-item</td> 
    <td>color-picker</td> 
    </tr> 
</table> 

Jquery: -

$(document).ready(function() { 

$('#add').click(function() { 
    alert('clicked') 
    $('#points-table tr:last').after('<tr>' + '<td>1</td>' 

     + '<td> <input class="jscolor" value="ab2567"/> </td></tr>'); 

    }) 


}) 

Answer 1

Вы должны получить значение цвета с использованием .val() и присвоить его переменной. Затем используйте переменную fir входное значение в таблице.

См скрипку https://jsfiddle.net/csgn6051/5/

$(document).ready(function() { 
$('#add').click(function() { 
    var color = $('#color').val(); 
    $('#points-table tr:last').after('<tr>' + '<td>1</td>' 
     + '<td> <input class="jscolor" value="'+color+'"/> </td></tr>'); 

    //This part below came from the comment by A. Wolf 
    new jscolor($('#points-table tr:last').find('.jscolor')[0]) 
    }) 
}) 

Answer 2

В вашем случае, вы можете получить значение цвета таким образом: $ Val(); ('jscolor.').

Но, я предлагаю вам использовать идентификатор для вас.