Использование палитры цветов спектра с новыми элементами

Question

Я использую спектральную палитру цветов http://bgrins.github.io/spectrum/, проблема в том, что я добавляю новые элементы из HTML-файла.

field_constructor.html

    <div id="constructor">
    <div class="label_constructor">
    <div class="label_text"><label>label:</label><input type="text"/></div> 
    <div class="label_backcolor"><label> backcolor :</label><input type="text" maxlength="6" size="6" class="colorpicker" value="000000" /></div>
    <div class="label_textcolor" ><label>textcolor:</label><input type="text" maxlength="6" size="6" class="colorpicker" value="000000" /></div>

код JQuery

      $($champdiv).load("field_constructor.html #constructor");
      $("#form_content").prepend($champdiv);

и код JQuery не будет работать, пока я вручную запустить некоторые события, такие как

        $("body").on("mouseover",function(){

        $(".colorpicker").spectrum({
       color: "#f00"
       }); 
       });

или события ручного запуска Я пробовал много решений, таких как события ручного запуска, но единственное событие, которое работает, это наведение мыши на тело или нажатие на поле с таким же классом, созданным таким образом.

 $input=$('<input type="text" maxlength="6" size="6" class="colorpicker"  value="000000" />'); 

и это будет очень тяжело для браузера, пожалуйста, помогите мне с этим, я не могу найти хорошее решение

Answer 1

Посмотрите документацию для функции загрузки jQuery: http://api.jquery.com/load/. Вы можете передать обратный вызов, который сработает после завершения загрузки, и оттуда вы сможете инициализировать палитру цветов (и только те, которые находятся в контейнере результатов):

$('#result').load("field_constructor.html #constructor", function() {
   $("#result .colorpicker").spectrum({
       color: "#f00"
   }); 
});