1

I'm using the Iris Color Picker by Automattic in a project and I would like the picker widget to close when clicking anywhere else than on the widget. For some reason I can't get my head around it and I just don't understand why it behaves like it does.

Please take a look at this pen. The lines that I would expect to give this functionality are

$('body').one('click', ':not(.iris-picker, .iris-picker *)', function(e) {
    e.stopPropagation();
    input.iris('hide');
});

The idea is to restrict the handler invocation to anything but the picker and it's descendants. However the widget also get's closed when e.g. clicking on the square handle or the white space between the selectors. I've tried different variations of this with all kind of (for me) inexplicable behavior.

Ok just now I was able to implement a working solution thanks to this answer. But since this has been boggling me for quite long now I'm gonna be so impudent and still ask this question. Could anybody please explain to me what's wrong with my approach?

Community
  • 1
  • 1
Arsylum
  • 524
  • 4
  • 14
  • 1
    you're using the 'one' function. You probably want to use 'on' instead. that's a start. – Sergey Feb 12 '16 at 23:09
  • the reason was to only bind the handler (once) when its needed i.e. the widget is visible, instead of listening all the time. Though one thing that's not clear to me is whether the handler gets unbound only when the filter (second argument) matches or on any click. – Arsylum Feb 13 '16 at 00:45

0 Answers0