Add double click event

Question

I implemented spectrum color picker , and I am trying to add a double click event to the palettes. (The one that has the predefined colors, the class name is: sp-thumb-el .) I added the following code after line 476 :

paletteContainer.on("dblclick", ".sp-thumb-el", function (){
    console.log("you Double Clicked");
});

And nothing happens when I double click. What am I doing wrong and how can I fix it?

Line 479 in JSFiddle

Answer 1

I think you want to do something like this.

 $("#btn").dblclick(function(){ console.log("working fine"); }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <button id="btn" > double click it </button> 

Answer 2

It seems you were missing https://bgrins.github.io/spectrum/spectrum.js .
Also, You need to remove your spectrum.css link and add the correct https version at https://bgrins.github.io/spectrum/spectrum.css

View the updated version @ https://jsfiddle.net/f72tscdj/

Hope this helps, Sean

Answer 3

With respect to the comment I made above, you might want to try a hack like this:

       paletteContainer.on("click", ".sp-thumb-el", function (e){
            e.preventDefault();
            e.stopImmediatePropagation();
                            clicks++;
           if(clicks===2){
             console.log("you Double Clicked");
             clicks=0;
           } 
        });

The same is updated in your plunkr too..