Question

我正在使用spectrum colorpicker 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"
       }); 
       });

或手动触发事件我尝试了很多解决方案，比如手动触发事件，但唯一可以工作的事件是身体鼠标悬停或onclick在同一类创建的字段上

 $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"
   }); 
});

使用具有新元素的光谱颜色选择器

1 个答案: