jQuery stopPropagation not working

Question

I'm using the following color picker and it works fine, but when i click on the color picker icon, i don't want it to bubble to body. So i tried the following and now the color picker is not working.

Check http://jsfiddle.net/CWGgM/.

If you remove the below code from jsfiddle then it works. What is causing this

$('#test').click(function(e){
    e.stopPropagation();
});

Answer 1

It appears to use its own live() style code, where events are allowed to bubble up and are handled on the document.

Therefore, the events must propagate to document or they won't work.

You could avoid the event triggering on body with the following workaround...

$('body').click(function(event) {
    if ($(event.target).parent()[0] == $('.mColorPickerTrigger')[0]) {
       return true;   
    }
});

jsFiddle.

Or this might work better with multiple color pickers...

$('body').click(function(event) {
    if ($(event.target).parent().hasClass('mColorPickerTrigger')) {
       return true;   
    }
});

jsFiddle.