using spectrum color picker with new elements

Question

im using spectrum colorpicker http://bgrins.github.io/spectrum/, the problem is that i append new elements from an html file

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 code

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

and the jquery code wont run until i manualy fire some events like

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

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

or manual triggring events i tried many solutions like manual triggring events but the only event that work is body mouseover or onclick on a field with same class created like that

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

and this will be very heavy for browser please help me with that i cant find a good solution

Answer 1

Take a look at the documentation for the jQuery load function: http://api.jquery.com/load/. You can pass a callback that will fire once the load finishes, and from there you should be able to initialize the colorpicker (and only the ones within the result container):

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