Вновь добавленные элементы с использованием делегата () не будут связывать jscolor.js

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

В вашем коде есть несколько проблем:

1. Вы используете идентификаторы в своей переменной "line".Идентификатор должен быть уникальным в документе HTML.Вам лучше использовать атрибуты имени или создать новую строку по-другому, чтобы вы могли изменить идентификаторы.

2. Почему вы делегируете событие «click» для кнопки «Add»?Делегирование событий используется для автоматической привязки событий к элементам, создаваемым динамически.В вашем примере кнопка «Добавить» статична для страницы, вам не нужно использовать делегат, просто .click () или .bind ().

3. После созданияВ новой строке вы должны явно инициализировать свой 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

Вы можете решить эту проблему, повторно инициализировав объект jscolor в событии добавления.

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

Answer 3

У меня нет другого решения.

У меня работает следующее решение.
Просто создать новый объект jscolor с помощью , передавая объект входного элемента в javascript.

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

ссылка из http://jscolor.com/examples/ перейти к Создание новых палитр цветов section.