Usuń klasę po kliknięciu poza div

Question

Wiem, że to stare pytanie, ale dużo szukałem. Chcę usunąć klasę po kliknięciu poza tym ciałem. tutaj jest mój kod:
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"); 
     } 
    }); 
}); 

i oto skrzypce: Fiddle

Dziękujemy za pomoc!
Thx

Answer 1

To z powodu propagacji zdarzenia.

Po kliknięciu na uruchamiany jest uchwyt pierwszego kliknięcia, który dodaje klasę, a następnie z powodu propagacji zdarzenia dołączony do dokumentu przewodnik jest uruchamiany, gdy spełnia warunek if i usuwa klasę.

Jednym z możliwych rozwiązań jest tu użyć 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>

---

Innym jest

$(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>