.on( events [, selector ] [, data ], handler(eventObject) )

data
型別: Anything
當一個事件被觸發時，要傳遞給事件處理函式的event.data。

		<button class="num1">點選生成按鈕</button>
		<div class="btn" style="width: 400px;height: 200px;border: 1px solid red;"></div>
		<script src="jquery-3.3.1.js"></script>
		<script>
			$(function(){
				$('.num1').click(function(){
					$('.btn').html("<button class='num2'>點選</button>");
				});
				//對未來產生程式碼事件繫結，$('.num2').on('click',function(){}） 事件無效
				$('.btn').on('click','.num2',function(){
					alert('click!')
				});
			})
		</script>
 

大多數瀏覽器事件冒泡, 或者 傳播，都是由內到外的，從在文件最深處的元素( 事件目標 event target)開始， 一路傳遞到body和document元素。在Internet Explorer 8和更低，一些事件，如change 和 submit本身不泡沫，但 jQuery 為了跨瀏覽器一致性， jQuery 在這些事件上模擬了冒泡行為。

如果省略selector或者是null，那麼事件處理程式被稱為直接事件 或者 直接繫結事件 。每次選中的元素觸發事件時，就會執行處理程式，不管它直接繫結在元素上，還是從後代（內部）元素冒泡到該元素的

當提供selector引數時，事件處理程式是指為委派 事件（代理事件）。事件不會在直接繫結的元素上觸發，但當selector引數選擇器匹配到後代（內部元素）的時候，事件處理函式才會被觸發。jQuery 會從 event target 開始向上層元素(例如，由最內層元素到最外層元素)開始冒泡，並且在傳播路徑上所有綁定了相同事件的元素若滿足匹配的選擇器，那麼這些元素上的事件也會被觸發。

事件處理只能繫結在當前被選中的元素上;而且，在您的程式碼呼叫.on()的時候，他們必須在頁面文件中已經存在。為了確保目前的元素可以被選擇的（注：即，存在），最好是在 document 的 ready 事件中進行事件繫結。如果新的HTML被注入頁面時，新的HTML放置到頁面後，事件會繫結到匹配選擇器（selector引數）的元素。或者，使用委派事件繫結事件處理程式，如下所述。

委託事件有一個優勢，他們能在後代元素新增到文件後，可以處理這些事件。 在確保所選擇的元素已經存在的情況下，進行事件繫結時，您可以使用委派的事件，以避免頻繁的繫結事件及解除繫結事件。 例如，這個已經存在的元素可以是 Model-View-Controller（模型 - 檢視 - 控制器）模式中 View（檢視） 的一個容器元素，或document。如果想監視所有文件中的冒泡事件的話。在載入任何其它 HTML 之前，document 元素在 head 中就是有效的，所以您可以安全的在 head 中進行事件繫結，而不需要等待文件載入完。

除了可以給未建立的後代元素繫結事件外（即上面提到的優勢），代理事件的另一個好處就是，當需要監視很多元素的時候，代理事件的開銷更小。例如，在一個表格的 tbody 中含有 1,000 行，下面這個例子會為這 1,000 元素繫結事件：

$("#dataTable tbody tr").on("click", function(event){
  alert($(this).text());
});

委派事件的方法只有一個元素的事件處理程式，tbody，並且事件只會向上冒泡一層（從被點選的tr 到 tbody ）:

$("#dataTable tbody").on("click", "tr", function(event){
  alert($(this).text());
});