Question

This is my code:

   $("#newGenreTxt").blur(function () {
        $("#txtAddGenreContainer").slideUp();
    });

I want to hide the text box if it loses its focus, but the problem is that I want to hide it if a user clicks anywhere but my button:

$("#addGenreFinal").click(function () {});

So If user clicks the addGenreFinal nothing happens and if it’s something else hide the textbox.

Answer 1

You can bind the .slideUp() call to the a click event firing on the document object and then cancel the click if it is called on either the addGenreFinal or the newGenreTxt elements:

//add event handler to hide the `txtAddGenreContainer` element when the document is clicked
$(document).on('click', function () {
    var $tar = $("#txtAddGenreContainer");//UPDATE
    if ($tar.css('display') != 'none') {//UPDATE
        $tar.slideUp();
    }//UPDATE
});

//add event handler to the `addGenreFinal` and `newGenreTxt` elements to stop the click event from bubbling up the document
$('#addGenreFinal, #newGenreTxt').on('click', function (event) {
    event.stopPropagation();
});

Here is a jsfiddle: http://jsfiddle.net/jasper/qrSEn/