jQuery 事件冒泡、live()、點擊事件不傳播

Question

我有兩個容器，一個在頁面加載之前不會生成。 最后生成的（ <div class=last></div> ）應該出現在第一個之上。 從視覺上看，它確實掩蓋了第一個。 但是，我無法讓“.last”響應live()單擊事件。 它將響應第一個 div，但不會響應最后一個 div（同樣，視覺上出現在前景中的 div）。 這讓我發瘋，頁面上沒有其他點擊事件。 要清楚這是我的頁面：

<body>
<div class="first">First div</div>
<script type="text/javascript">
// This works
 $('body').append($('<div/>').addClass('last').text('last div')); 
//This does not
 $('.last').live('click', function(e) {
      alert('hello');
 }); 
</script>
</body>

如果我更換.last用.first它的作品，我沒有其他的單擊事件，所以我不明白為什么傳播應該停止。 我什至將 z-index: -1 分配到最后。 這必須非常簡單，有什么想法嗎？

最后一個 Div 的 CSS：

-moz-box-shadow:0 4px 10px 0 #8B8B8B;
background-color:white;
cursor:default;
margin:0 0 0 2px;
padding:4px 0;
position:absolute;

第一個 div，沒有 CSS。

編輯：我的 DOM 結構比上面的例子復雜一點。 我很肯定 div “last” 是可見的並且位於頂部。 這是項目的實際 DOM 結構：

<div>
 <button> (when button is pressed last is created)
  <span>
   <div>
    <div class="last"></div>
   </div>
  </button>  
 </div>
 <table>
  <thead>
   <tr>
    <td><div class="first"></div></td>
   </tr>
  </thead>
 </table>

我相信我想通了，直到我張貼了我的整個樹才意識到這一點。 我覺得很愚蠢。 “按鈕”div 正在停止傳播，因為它附加了一個 jquery-ui 事件。 無論出於何種原因，Chrome 和 Firefox 都不會呈現狀態更改（即顯示按鈕被按下）。 這是因為“最后一個”div 不在按鈕上及其下方。 然而，就事件而言，它停在按鈕上。 IE8，奇怪的是，會顯示按鈕被按下（事件觸發），這導致意識到這是錯誤。 我完全忘記了 jQuery-UI 掛在按鈕上，這可能既顯示 div 又阻止顯示它。 將 div 移到按鈕外解決了這個問題。

如果 jQuery 有某種實時日志，您可以在其中看到整個事件向上冒泡，那就太好了。

Answer 1

你需要有引號包圍body在$(body)塊，因為沒有變量命名的body 。

$('body').append($('<div/>').addClass('last').text('last div'));

Answer 2

那.live()應該工作......

嘗試為該div添加邊框，看看該div是否真的存在...

你試過.delegate()嗎？

$('body').delegate('.last', 'click', function(){
    alert('hello')
});

jQuery 事件冒泡、live()、點擊事件不傳播

問題描述

2 個解決方案

解決方案1
2 2010-07-22 02:34:41

解決方案2
1 2010-07-22 02:47:28

jQuery 事件冒泡、live()、點擊事件不傳播

問題描述

2 個解決方案

解決方案1 2 2010-07-22 02:34:41

解決方案2 1 2010-07-22 02:47:28

解決方案1
2 2010-07-22 02:34:41

解決方案2
1 2010-07-22 02:47:28