Jquery单击事件堆栈

Question

我有3个元素。每个人都有一个元素，在他们点击时发现他们的父母，并发送它去工作。问题在于点击事件似乎在堆叠。例如，如果我点击元素＃1，它将元素＃1发送出去。然后，如果我单击元素＃3，它会发送元素＃1和元素＃3。然后，如果我单击元素＃2，它将发送元素＃1，元素＃3和元素＃2。我如何才能让它只发送点击事件的一个直接父对象。

相关代码：

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

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

    }); 

.tiles是包装类所有的家长份额，.live瓦在于得到送走，.fa铅笔在于被点击孩子的个别家长和showEditDialog正在发送。

编辑----

<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> 

评论中的内容（一切，除了.tiles）动态添加，但是这是它会是什么样子。

Answer 1

没关系我发现这不是代码中提到的问题。 showEditDialog（）函数自己调用了两次，并且出于某种原因冒泡到第二个父元素。我只是将自己的呼叫移除，并且只在后面调用正确的呼叫。

Answer 2

因为您正在识别类.tiles的所有按钮，所以您必须每次都将一个UNIQUE子选择器分析到该函数中。

Answer 3

而不是stopPropagation。试着用stopImmediatePropagation()

切换出来从http://devdocs.io/jquery/event.stoppropagation

防止冒泡DOM树，阻止任何 父处理程序被通知的事件的事件。

从http://devdocs.io/jquery/event.stopimmediatepropagation

除了保持从 一个元件上的任何额外的处理程序被执行，该方法也通过隐含 调用event.stopPropagation（）停止冒泡。为了简单地阻止冒泡到祖先元素的事件 ，但允许在相同元素上执行其他事件处理程序 ，我们可以使用event.stopPropagation（） 来代替。

我认为，因为其他处理程序正在执行它导致您的问题。通过改变它可以防止执行以及冒泡。