JSCouleur ne fonctionne pas avec l'élément <i>?

Question

Je veux utiliser JScolor, mais je n'arrive pas à le faire fonctionner quand j'appuie sur un élément, ce qui en détruit le but. Quelqu'un a une solution?

<div class='drag resizable'> 
    <ul class='list-inline'> 
     <li> 
      <textarea class='resizable' type='text'></textarea> 
     </li> 
     <li> 
      <div class='buttonDiv'> 
       <i class='fa fa-paint-brush fa-lg color' id='rect' aria-hidden='true'></i> 
       <br> 
       <i class='fa fa-trash fa-lg delete' aria-hidden='true'></i> 
      </div> 
     </li> 
    </ul> 
</div> 

Voici un JSFiddle complet. Lorsque vous cliquez sur le Paint Brush, il est supposé ouvrir la palette JSColor, mais il dosnt, pour moi, il ne fonctionne que sur les éléments d'entrée.

https://jsfiddle.net/0vjf9cdz/4/

Answer 1

Cet exemple fonctionne très bien

  <ul> 
       <li> 
       <button 
       class="pincel fa-paint-brush jscolor {valueElement:null,value:'66ccff', styleElement:'rect'}" 
       >icon here</button> 
       </li> 
      </ul> 
      <p id="rect" style="border:1px solid gray; width:161px; height:100px;"> 
      </p> 
      <script> 
      function update(jscolor) { 
       // 'jscolor' instance can be used as a string 
       document.getElementById('rect').style.backgroundColor = '#' + jscolor 
      } 
      </script>a 

Exemple ici https://jsfiddle.net/rollrodrig/judkgthd/1/

Answer 2

ne pouvait pas laisser celui-aller. M'embêtait, lol.

https://www.w3schools.com/tags/tag_i.asp

La attrib couleur est tout simplement pas pris en charge sur le < i> élément ...