2011-11-18 99 views
0

我有一個事件處理程序正在一個容器文檔上觸發,將其傳播到一個li-Element內部。出於某種原因,當我按下return時,該事件也會在DOM樹的更上方發生鏈接。我無法阻止事件冒泡DOM,我不知道爲什麼。誰能幫忙?謝謝。停止事件從冒泡的DOM

我使用jQuery 1.7不幸的是我不能給活代碼示例,使任何意義,由於它的複雜... :-(

我的HTML是這樣的:

我的Javascript
<div id="contentBox"> 

    <form [...]> 

     <a class="del" href="javascript:[...]">Delete entry</a> 

     <fieldset> 
      <legend>An entry</legend> 

      <input name="xy" class="lmti"> 

      <ul> 
       <li>Result 1</li> 
       <li>Result 2</li> 
       <li>Result ...</li> 
      </ul> 
     </fieldset> 

    </form> 

</div> 

件看起來像這樣:

$('#contentBox').on('click', '.del', function(e) { [...deletes an entry...] }); 

$('#contentBox').on('keyup', '.lmti', function (e) { [...takes over search results...] }); 

會發生什麼情況是這樣的:

#contentBox的內容被用ajax動態加載。 我有一個列表中的元素,我可以動態擴展。 每次添加新元素時,都會添加字段集中的一組所有標記。 我可以使用鏈接class =「del」旁邊的元素來刪除元素。 當用戶鍵入輸入框時,我會在它下面顯示一個實時搜索框,以便他可以從那裏接管條目。這也可以通過按向下箭頭完成,通過搜索結果,然後按返回接管結果。

在上述事件中,我檢查了一個按下的返回,我實際上從標題列表中選取標題並將其放入HTML輸入字段中。像谷歌實時搜索。

問題:如果我按返回接管一個結果集,上述事件也被觸發,用於刪除鏈接的點擊事件處理程序。

我無法停止傳播與e.stopPropagation的任何組合,e.stopImmediatePropagatione.preventDefault()等。

我只發現在delete-link事件處理程序中檢查事件目標會停止刪除條目。但我寧願事件不要達到一個 -click事件。

% -/

任何想法?

+0

你使用'on'不僅會束縛的事件處理程序如果它們內部發生的元素與給定選擇器匹配,則觸發。正如你可以看到[這裏](http://jsfiddle.net/WUYvp/),你給出的簡化例子非常完美。 **我會檢查您獲得的HTML是否有效,並且您以正確的順序關閉標籤,並且沒有錯過結束標籤。**如果您仍然遇到問題,我們可以提供幫助是否可以提供一段代碼來顯示您遇到的行爲。 – Matt

+0

檢查'e.target'屬性 - 它會告訴你哪個元素事件觸發。 –

+0

@Matt「*事件處理程序...只會觸發... *」。事件**在元素處觸發**,事件處理程序由**執行**(或調用)。 –

回答

1

您是否嘗試過使用jQuery的event.stopPropagation();?使用

試試這個:

event.stopPropagation(); 

連同:

event.bubbles = false; 

的作品就像一個魅力.....