JQuery.live（）無法正常工作

Question

我知道live在版本1.7中被棄用，在1.9中被刪除，並且不再推薦它。但仍然，因爲我正在準備面試機測試，因此我試圖區分live和on。 Document說

調用event.stopPropagation（）在事件處理程序處於停止的事件處理程序的安裝文件 在下部無效;該事件已經傳播到文件。

因此我試過這個。 標記：

<div> 
    <h1> 
     <a href="#"> 
      <span>Hello</span> 
     </a> 
    </h1> 
</div> 

腳本：

$(document).ready(function() { 
     $('span').live("click",function() { 
      alert('span'); 
     }); 
     $('a').click(function() { 
      alert('span a'); 
     }); 
     $('h1').click(function() { 
      alert('span a h1'); 
      event.stopPropagation(); 
     }); 
     $('div').click(function() { 
      alert('span a h1 div'); 
     }); 
    }); 

我使用jQuery 1.7版本，其中兩個live和on存在。

發生了什麼：

1. 跨度live是沒有得到調用，而是直接調用的aclick。
2. 如果我刪除除live之外的所有其他事件，則它將被調用。
3. 作爲醫生說，這是在做完全相反的，即它停止事件冒泡，如果我用live連接event.stopPropagation();

JSFiddle

Answer 1

事件處理程序一貫重視document。如果在live的回調中調用event.stopPropagation，則此事件已經冒泡到文檔中，因此它不會直接附加事件處理程序。

事件何時到達您的event.stopPropagation()被調用時，h1元素，所以它永遠不會到達那裏的live事件處理程序附document。

隨着on你可以創建所有類型的事件處理jQuery支持。如果你看一下jQuery的來源，你可以看到，在1.7 live功能只映射到：

live: function(types, data, fn) { 
    jQuery(this.context).on(types, this.selector, data, fn); 
    return this; 
} 

原因live被刪除是使API更清晰，更符合邏輯的，當事件發生以及它們在哪裏捕捉。

編輯

你的DOM，並在您的事件處理程序連接到的地方：

document $('span').live("click") **not called** (equal to: $(document).on('click', 'span')) 
    | 
    div  $('div').click() **not called** 
    | 
    h1  $('h1').click() + event.stopPropagation() **the propagation (bubbling) is stopped here not reaching the document** 
    | 
    a  $('a').click() 
    | 
    span  **event happens here and bubbles up**