Question

我想在WordPress上添加颜色选择器。我尝试通过克隆<div>并将其附加来进行尝试，但是克隆颜色选择器没有打开。

这是我尝试过的：

jQuery(function($) {
  $('.select-color').wpColorPicker();
  $('.more-select').click(function(e) {
    e.preventDefault();
    var name = $('.number-container:last').clone();
    name.find('.ppom-img-uploader-area').end().appendTo('.ppom-img-uploader-area');
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="main-container">
  <div class="number-container">
    <label>name</label>
    <input type="text" name="">
    <label>color</label>
    <input type="text" name="color-name" class="select-color">
  </div>
  <button class="more-select">more</button>
</div>

Here也是JSFiddle（如下面的注释中所建议）。我怎么解决这个问题？

谢谢。

Answer 1

在DOM准备就绪后，使用它来初始化颜色选择器：$('.select-color').wpColorPicker();

首次加载DOM时不存在的任何元素都不会受到开头运行的任何JS的影响。克隆后，您需要初始化新的。

$('.more-select').click (function (e) {
   e.preventDefault();

    var name = $('.number-container:last').clone () ;
     name.find('.ppom-img-uploader-area').end().appendTo('.ppom-img-uploader-area');
     $('.select-color').wpColorPicker();
});

我无法为您进行测试，因为颜色选择器无法在您的代码段中运行（您没有为wpColorPicker（）函数提供JS）。我相信它将在WordPress中工作。

WordPress颜色选择器不适用于克隆jQuery

1 个答案: