javascript - Jquery - Clickable object on a Clickable object -

so, have clickable object on clickable object this

the cross mark have bigger z-index.

 .close {   position: absolute;   margin-top:3px;   margin-left: 323px;   width: 23px;   height: 23px;   opacity: 0.3;   z-index: 5px;    } //cross mark  .quickmode_block{     width: 400px;     height: 80px;     border: 1px solid rgba(255, 255, 255, .4);     -moz-border-radius: 4px;     -webkit-border-radius: 4px;     border-radius: 4px;     -moz-background-clip: padding;     -webkit-background-clip: padding-box;     background-clip: padding-box;     display: block;     font-family: 'source sans pro', sans-serif;     font-size: 18px;     color: #fff;     background: rgba(255, 255, 255, 0.4) no-repeat scroll 16px 16px;     padding-left: 45px;     margin: 0 auto;     margin-bottom: 20px;  } 

<div style="margin-top:-7%" id="add_quicksetup" style="height:100px;width:500px;margin-top:0%;margin-right:0%;position: relative" class="quickmode_block">                 <div class="close">                 </div>                 <center style="margin-top:20px"><font size="5" style="margin-left:-14%;">add quick mode</font></center>             </div> 

i use jquery .click dom. somehow when click it, still trigger both. there solution this?

$(document).ready(function() {           $('#add_quicksetup_confirm').click(function() {                     //some event;                 });              }); $(document).ready(function() {          $('.close').click(function() {                     //some event;                 });              }); 

add

  $('.close').click(function(event) {                 event.stopimmediatepropagation();                 //some event;             });