How to hide jQuery UI Slider on blur?

Question

I have an image that opens the jQuery UI Slider div on click and allows users to set a value by dragging the handle. What I'm trying to do now is hide that handle when the user clicks anywhere else on the page, but the regular .blur event doesn't seem to work.

$("#openPriceToSliderGif").click(function(){
        $("#slider-vertical").show();
        $("#slider-vertical").focus();
    });
    $("#slider-vertical").blur(function () {
         $("#slider-vertical").hide();
    });

Answer 1

Probably you will have a better luck on defining global onclick handler and there you need to check if source of event is not your slider. If not - do your magic.

Basically - if you spinner doesn't include element such as text field or link it will not support focus/blur

Answer 2

Ok, this is what I have put together to make this work. Thanx DroidIn.net for your help.

$(document).bind("click", function(e){
      if(e.target.id != $("#openPriceToSliderGif").attr("id"))
        $("#slider-vertical").hide();
      return false;
    });

    $("#openPriceToSliderGif").click(function(){
        $("#slider-vertical").toggle();
    });