從jQuery 版本 1.7 起，on() 方法是向被選元素添加事件處理程序的(官方推薦)首選方法。
當瀏覽器下載完一個頁面的時候就開始渲染(翻譯)HTML標簽，然后執行css、js代碼，在執行js代碼的時候就注冊了相應綁定的事件，我們平常用jQuery給HTML標簽綁定(單擊)事件是一般這樣寫 $("#btnId").click(function () { //觸發事件后 邏輯 }); 但是對用js動態添加的元素 是無效的，即沒有綁定單擊事件，所以對於動態添加的標簽需要用on()來綁定事件 $(document).on("click touchstart", '.clickEve', function () { console.log($(this)); alert("jquery on事件對動態添加的元素啟了作用該button的 idValue=" + $(this).attr("id")); }); 其中".clickEve" 類選擇器。
下面完整的測試代碼：
1 <!DOCTYPE html > 2 <head> 3 <title>測試動態添加的元素 綁定jQuery綁定on事件（on的用法）</title> 4 <!--<script src="Js/jquery-2.1.4.min.js" type="text/javascript"></script>--> 5 <!--<script src="Js/jquery-1.11.3.min.js" type="text/javascript"></script>--> 6 <!--<script src="Js/jquery-1.9.1.min.js" type="text/javascript"></script>--> 7 <script src="Js/jquery-1.8.3.min.js" type="text/javascript"></script> 8 <script type="text/javascript"> 9 $(document).on("click", '.clickEve', function () { 10 console.log($(this)); 11 alert("jquery on事件對動態添加的元素啟了作用該button的 idValue=" + $(this).attr("id")); 12 }); 13 14 // 多個事件綁定同一個函數 15 $(document).on("mouseover mouseout ", '.clickEve', function () { 16 alert("多個事件綁定同一個函數"); 17 }); 18 19 //寫法一：多個事件綁定不同函數 20 var data = { id: 5, name: "張三" }; 21 var events = { 22 "mouseover": function (event) { 23 alert("寫法一mouseover=======" + event.data.name); 24 }, 25 "mouseout ": function (event) { 26 alert("寫法一mouseout"); 27 } 28 }; 29 //為類".clickEve"綁定mouseenter mouseleave兩個事件，並為其傳入附加數據data 30 $(document).on(events, ".clickEve", data); 31 32 //寫法二:多個事件綁定不同函數 33 $(document).on({ 34 "mouseover ": function () { alert("寫法二：多個事件綁定不同函數mouseover"); }, 35 "mouseout ": function () { alert("寫法二：多個事件綁定不同函數mouseout"); }, 36 "click": function () { alert("寫法二：多個事件綁定不同函數click"); } 37 }, ".clickEve"); 38 39 $(function () { 40 var htmlArry = []; 41 for (var i = 0; i < 20; i++) { 42 htmlArry.push("<input type='button' id='" + i + "' class='clickEve' value='測試jquery on事件對 動態添加HTML元素 是否 啟作用" + i + "' /><br/><br/><br/>"); 43 } 44 var html = htmlArry.join(''); 45 console.log(html); 46 $("#test").append(html); 47 }); 48 </script> 49 </head> 50 <body> 51 <div id="test"> 52 <input type="button" id="-1" class="clickEve" value="測試jquery on事件對 動態添加HTML元素 是否 啟作用" /> 53 <br /> 54 <br /> 55 <br /> 56 </div> 57 </body> 58 </html>
$(document).on(event,childSelector,data,function,map)的參數說明：
event：必需。規定添加到元素的一個或多個事件。事件的類型包含： blur, focus, focusin, focusout, load, resize, scroll, unload, click, dblclick, mousedown, mouseup, mousemove, mouseover, mouseout, mouseenter, mouseleave, change, select, submit, keydown, keypress, keyup, error等，由空格分隔多個事件值。必須是有效的事件。
childSelector：需要綁定事件的標簽的ID、類、屬性選擇器
data：觸發事件需要傳入的數據，可選。規定傳遞到函數的額外數據。
function：必需。規定當事件發生時運行的函數。
map：可選，規定事件映射 ({event:function, event:function, ...})，包含要添加到元素的一個或多個事件，以及當事件發生時運行的函數。
兼容性：
在手機上建議使用 "touchstart" ，如果不使用在iOS上是沒有反應的：
例如：$(document).on("touchstart", '.clickEve', function () { console.log($(this)); alert("jquery on事件對動態添加的元素啟了作用該button的 idValue=" + $(this).attr("id")); });