Question: I have 3 elements. Each has an element within them that when clicked find their parent and send it away to be worked on. The problem is the click events seem to be stacking. For example if I click on Element #1, it sends away Element #1 to be worked on. Then if I click Element #3, it sends away Element #1, and Element #3. Then if I click Element #2, it sends Element #1, Element #3, and Element #2. How do I get it to only send the one direct parent of the click event.

Relevant code:

```
    $('.tiles ').on('click', '.fa-pencil', function(e){
        e.stopPropagation();

        var tile = $(this).closest(".live-tile");
        showEditDialog(tile);

    });

```

.tiles being the wrapper class all the parents share, .live-tile being the individual parents that get sent away, .fa-pencil being the child that gets clicked, and showEditDialog being the sending away.

EDIT----

```
<div class="tiles">
    <!-- <div class="live-tile" >
         <span id = "bar" class = "tile-title optionsBar"><i class="fa fa-2x fa-pencil"></i><i  class="fa fa-2x fa-times-circle"></i></span>
         <div class ="mainDiv"></div>
        <span class = "tile-title imageBar"><img class = "image" src = "http://9gag.com/favicon.ico"></img></span>
        </div>-->
</div>

```

The content within the comments (everything except .tiles) is dynamically added, but that is what it would look like.

Answer: 
Instead of stopPropagation. Try switching it out with `stopImmediatePropagation()`

From <http://devdocs.io/jquery/event.stoppropagation>

> 
> Prevents the event from bubbling up the DOM tree, preventing any
>  parent handlers from being notified of the event.
> 
> 
> 

From <http://devdocs.io/jquery/event.stopimmediatepropagation>

> 
> In addition to keeping any additional handlers on an element from
>  being executed, this method also stops the bubbling by implicitly
>  calling event.stopPropagation(). To simply prevent the event from
>  bubbling to ancestor elements but allow other event handlers to
>  execute on the same element, we can use event.stopPropagation()
>  instead.
> 
> 
> 

I believe that because other handler are being executed it is causing your problem. By changing it will prevent execution as well as bubbling.
Nevermind I found out it was not that particular point in code cauding the issue. The showEditDialog() function was calling itself twice, and for some reason bubbling to the parent tile for the second one. I just remove the call to itself and it only called the correct one after.