jQuery 之用on()代替live()（已廢棄）
阿新 • • 發佈：2021-06-17
自jQuery1.7以後，live()被廢棄；自jQuery1,9以後，live被移除。同理，在jQuery1.7以後，建議用on()代替bind()、live() 和 delegate()。
1 語法
on()和bind()的語法分別如下：
1 // on的語法 2 $(selector).on(event ,data, function) 3 // bind的語法 4 $(selector).live(event,data,function)
|
*event |
必需。規定要從被選元素新增的一個或多個事件或名稱空間。 由空格分隔多個事件值，也可以是陣列。必須是有效的事件。 |
|
data |
可選。規定傳遞到函式的額外資料。 |
|
function |
可選。規定當事件發生時執行的函式。 |
從這裡可以看出，on()與live()的區別在於，on()能夠新增到指定的子元素處理程式。看來，on()的內心有著它的繼承者，而live()的內心只有自己。
2 例子
下面，一個例子，點選button，切換p的顯示和隱藏（由於例子簡單，就不顯示頁面效果了）。HTML程式碼如下：\
1 <body> 2 <div style="background-color:red"> 3 <p>這是一個段落。</p> 4 <button>請點選這裡</button> 5 </div> 6 </body>
使用bind()方法jQuery代替如下：
1 $(document).ready(function(){ 2 $("button").live("click",function(){ 3 $("p").slideToggle(); 4 }); 5 });
使用on()方法代替live()程式碼如下：
1 $(document).ready(function () { 2 $("button").on("click", function() { 3 $("p").slideToggle(); 4 }); 5 });
我們注意到，on可以新增指定子元素的處理程式。因此，jQuery程式碼也可以如下表示：
1 $(document).ready(function () { 2 $("body").on("click", "button", function () { 3 $("p").slideToggle(); 4 }); 5 });
完結，✿✿ヽ(°▽°)ノ✿。
3 擴充套件問題
參考網址
jQuery 事件 - live() 方法: https://www.w3school.com.cn/jquery/event_live.asp
https://www.runoob.com/try/try.php?filename=tryjquery_event_on_live