Entfernen Klasse nach Klick außerhalb der div

Question

Ich weiß, das ist eine alte Frage, aber ich habe viel gesucht. Ich möchte die Klasse entfernen, nachdem ich außerhalb des gleichen Körpers geklickt habe. hier ist mein Code:
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"); 
     } 
    }); 
}); 

und hier ist die Geige: Fiddle

Schätzen Sie Ihre Hilfe!?
Thx

Answer 1

Es ist wegen der Ausbreitung des Ereignisses.

Wenn Sie auf user-login-top klicken, wird das erste Klick-Handle ausgelöst, das die Klasse hinzufügt, und dann wird der Handler, der an das Dokument angehängt ist, dort ausgelöst, wo er die if-Bedingung erfüllt und die Klasse entfernt.

Eine mögliche Lösung ist hier 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>

---

Ein weiterer Grund ist

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

012 zu verwenden,