In this example I want the alert to be triggered when the black outer div is clicked but not when anything inside the inner div is clicked.
Currently when I click the inner button it triggers the alert.
$("#outer").click(function() {
alert("triggered");
});#outer{
position: absolute;
width: 100%;
height: 100%;
background-color: #000;
display: flex;
justify-content: center;
align-items: center;
}
#inner{
background-color: #fff;
width: 300px;
height: 300px;
text-align: center;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="outer">
<div id="inner">
<button>inner button</button>
</div>
</div>I want inside the inner div nothing to trigger the alert. How do i do this?
(for some reason inner button isn't showing in snippet, here is codepen link: https://codepen.io/GuerrillaCoder/pen/Pmvmqx)