Удалить класс после клика за пределами div

Question

Я знаю, что это старый вопрос, но я много искал. Я хочу удалить класс после нажатия за пределами тела. Вот мой код:
Html

<div id="user-login-top">Enter</div> 
    <div id="user-login-wrapper" class="">visible</div> 

Jquery

$(function() { 
    $("#user-login-top").on("click", function() { 
     $("#user-login-wrapper").addClass("wide"); 
    }); 
    $(document).on("click", function (e) { 
     if ($(e.target).is("#user-login-wrapper") === false) { 
      $("#user-login-wrapper").removeClass("wide"); 
     } 
    }); 
}); 

и вот скрипка: Fiddle

Цените вашу помощь!?
Thx

Answer 1

Это из-за распространения события.

Когда вы нажимаете на user-login-top, запускается первый клик дескриптора, который добавляет класс, а затем из-за распространения события обработчик, прикрепленный к документу, запускается там, где он удовлетворяет условию if и удаляет класс.

Одним из возможных решений является использование event.stopPropagation()

$(function() { 
 
    $("#user-login-top").on("click", function(e) { 
 
    $("#user-login-wrapper").addClass("wide"); 
 
    e.stopPropagation() 
 
    }); 
 
    $(document).on("click", function(e) { 
 
    if ($(e.target).is("#user-login-wrapper") === false) { 
 
     $("#user-login-wrapper").removeClass("wide"); 
 
    } 
 
    }); 
 
});

#user-login-wrapper { 
 
    opacity: 0; 
 
} 
 
#user-login-wrapper.wide { 
 
    opacity: 1 !important; 
 
}

<div id="user-login-top">ورود</div> 
 
<div id="user-login-wrapper" class="">visible</div>

---

Другой

$(function() { 
 
    $("#user-login-top").on("click", function(e) { 
 
    $("#user-login-wrapper").toggleClass("wide"); 
 
    }); 
 
    $(document).on("click", function(e) { 
 
    if ($(e.target).is("#user-login-wrapper, #user-login-top") === false) { 
 
     $("#user-login-wrapper").removeClass("wide"); 
 
    } 
 
    }); 
 
});

#user-login-wrapper { 
 
    opacity: 0; 
 
} 
 
#user-login-wrapper.wide { 
 
    opacity: 1 !important; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
 
<div id="user-login-top">ورود</div> 
 
<div id="user-login-wrapper" class="">visible</div>