div

Question

के बाहर क्लिक करने के बाद कक्षा को निकालें मुझे पता है कि यह एक पुराना सवाल है, लेकिन मैंने बहुत कुछ खोजा है। मैं इस तरह के शरीर के बाहर क्लिक करने के बाद कक्षा को हटाना चाहता हूं। यहां मेरे कोड है:
एचटीएमएल

<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 पर क्लिक करते हैं, तो पहला क्लिक हैंडल ट्रिगर होता है जो वर्ग जोड़ रहा है, फिर घटना प्रसार के कारण दस्तावेज़ से जुड़े हैंडलर ट्रिगर होते हैं जहां यह स्थिति को संतुष्ट करता है और कक्षा को हटा देता है।

एक संभव यहाँ समाधान 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>

012 है