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（） 來代替。

我認爲，因爲其他處理程序正在執行它導致您的問題。通過改變它可以防止執行以及冒泡。