Here is what the UI piece looks like

I had the trashcan working fine on click but that was when I didn't have to have a click event on the blue div. Now that I also have a click event on the blue div, when I click the trashcan, I am getting the blue div object instead of the trashcan object. I tried some z-index tricks, but that didn't work.

Any help appreciated.

<td id="ea-13" class="activityTableCell">
    <div style="width:90px; margin-left:0px" class="eventTimeSpan"></div>
    <div id="NewActivityContainer-13" class="activityContainerExisting">
        <div data-uid="57386445" class="label label-sm label-info newActivityClass point" style="width:59px; top:-1px; left:30px; z-index:4000" title="Mobile Game Party">
        Mobile Game Party 
            <div data-isactivity="1" data-packageid="" data-elid="57386445" class="xRemove" style="left:46px;z-index:8000"><i class="fa fa-trash font-red" title="Remove"></i>
            </div>
        </div>
    </div>
</td>

Click Code:

$(document).on("click", ".newActivityClass", function(){
    console.log(this);
    ...snip...
}

$(document).on("click", ".xRemove,.aRemove", function(){
...snip...
}

Here is what the UI piece looks like

I had the trashcan working fine on click but that was when I didn't have to have a click event on the blue div. Now that I also have a click event on the blue div, when I click the trashcan, I am getting the blue div object instead of the trashcan object. I tried some z-index tricks, but that didn't work.

Any help appreciated.

<td id="ea-13" class="activityTableCell">
    <div style="width:90px; margin-left:0px" class="eventTimeSpan"></div>
    <div id="NewActivityContainer-13" class="activityContainerExisting">
        <div data-uid="57386445" class="label label-sm label-info newActivityClass point" style="width:59px; top:-1px; left:30px; z-index:4000" title="Mobile Game Party">
        Mobile Game Party 
            <div data-isactivity="1" data-packageid="" data-elid="57386445" class="xRemove" style="left:46px;z-index:8000"><i class="fa fa-trash font-red" title="Remove"></i>
            </div>
        </div>
    </div>
</td>

Click Code:

$(document).on("click", ".newActivityClass", function(){
    console.log(this);
    ...snip...
}

$(document).on("click", ".xRemove,.aRemove", function(){
...snip...
}

• javascript
• jquery
• html
• css

• Pleasse, provide jsfiddle. – Alex Commented Nov 8, 2015 at 15:00

2 Answers 2

you can try event.stopPropagation()

$(document).on("click", ".xRemove,.aRemove", function(event){
   event.stopPropagation();
   // code here
});

source : https://api.jquery./event.stoppropagation/

Yes as stated earlier, event.stopPropagation() does the job for you.

For JsFiddle code: https://jsfiddle/peacock/r0kk5ps9/

$(document).on("click", "#inner", function(e){
   alert("clicked inner");
    e.stopPropagation();
});


$(document).on("click", "#outer", function(e){
   alert("clicked outer");
   e.stopPropagation();
});

#outer {
    width : 100px;
    height : 100px;
    background-color: #777777;
}

#inner {
    position: relative;
    top : 50%;
    left:50%;
    width : 30px;
    height : 30px;
    background-color: #232323;
}
    

<script src="https://ajax.googleapis./ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="outer"> 
    <div id="inner">
    </div>
</div>