Почему две функции блокируют друг друга?

Question

[Маратка]

Вот у меня есть элемент, которому при открытии присваивается класс openned и от выезжает. У элемента есть крестик, который делает так

$(".top").css("left", "-300px");
$('.top').removeClass('openned');
И все прекрасно работает. Но если я хочу чтоб элемент уезжал еще и при клике вне его, крестик перестает работать. Код при клике вне: 
jQuery(function($){        
        $(document).mouseup(function (e){ 
            var div = $(".openned"); 
            if (!div.is(e.target) 
                && div.has(e.target).length === 0) { 
                if($('.basket').hasClass('openned')){
                $(document).find('.openright').click();
                }
                if($('.top').hasClass('openned')){
                $(document).find('.openleft').click();
                }
		}
	});
});

Как это исправить?

Answer 1

[Андрей]

function hideTop() {
    $(".top")
        .css("left", "-300px")
        .removeClass('openned');
}

function hideBasket() {
    $(".basket")
        .css("right", "-300px")
        .removeClass('openned');
}

function attachMouseupEvent() {
    var $document = $(document);

    $document.on("mouseup.hideTop", function(evt) {
        var $target = $(evt.target);
        var $oppenedTop = $(".openned");

        if ($oppenedTop.length > 0 && $target.closest($oppenedTop).length === 0) {
            hideTop();
            hideBasket();
            $document.off("mouseup.hideTop");
        }
    });
}

jQuery(function($) {
    attachMouseupEvent();

    $(".top").on("click.showTop", function(evt) {
        // some code...
        attachMouseupEvent();
    })
});