恢復內容開始 今天我們來說說關於JQuery中事件綁定中on綁定的一些小問題，直接上代碼了，大家拷下去就可以用 恢復內容結束 恢復內容結束 ...
---恢復內容開始---
今天我們來說說關於JQuery中事件綁定中on綁定的一些小問題，直接上代碼了，大家拷下去就可以用
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> <style> * { margin: 0; padding: 0 } li { list-style: none } .ul_one, .ul_two { overflow: hidden; float: left; margin-left: 400px; margin-top: 200px; } .ul_one>li, .ul_two>li { text-align: center; height: 40px; width: 120px; background-color: yellow; border: 1px solid gray; line-height: 40px; } .ul_two>li { background-color: green; } p{color: green;font-size: 20px;clear:both;margin-left: 300px;margin-top: 20px} </style> </head> <body> <ul class="ul_one"> <li>a1</li> <li>a2</li> <li>a3</li> <li>a4</li> </ul> <ul class="ul_two"> <li>b1</li> <li>b2</li> <li>b3</li> <li>b4</li> </ul> <p>當我們在on函數的參數裡面傳入了子元素的參數 on的綁定機制類似於事件綁定，所以我們才不能移除某個子元素的事件</p> <p>而當我們不傳入子元素的參數，on的綁定機制相當於迴圈綁定，所以此時我們可以移除某個子元素的事件</p> <p>註意：需要引入JQuery,打開控制台看輸出，打開源碼看註釋</p> </body> </html> <script src="jquery-1.11.3.js"></script> <script> //JQuery中on綁定的一些小坑 // 然後用on來對兩個ul進行綁定 // 這種方法將第二個參數填入 即將子元素參數填入 $(".ul_one").on("click", "li", function () { console.log(this) //可以看到事件已經綁定上 }) //現在嘗試給第一個子元素移除事件 $(".ul_one").children().eq(0).off("click"); // 你會發現根本移除不掉 // 可以對未來元素實現綁定 var newli1 = $("<li>a未來元素</li>"); $(".ul_one").append(newli1) // 由於on的第二個參數是可選參數我們來試試換種寫法 $(".ul_two>li").on("click", function () { console.log(this) }) // 來，我們現在移除某個子元素的事件 $(".ul_two").children().eq(0).off("click"); //你會發現現在可以移除掉第一個子元素的事件 //不能對未來元素實現綁定 var newli2 = $("<li>b未來元素</li>"); $(".ul_two").append(newli2) // 重要 重要 // 那為什麼會造成這種情況呢 // 當我們在on函數的參數裡面傳入了子元素的參數 on的綁定機制類似於事件綁定，所以我們才不能移除某個子元素的事件，能對未來元素實現綁定 // 而當我們不傳入子元素的參數，on的綁定機制相當於迴圈綁定，所以此時我們可以移除某個子元素的事件,但不能實現對未來元素實現綁定 </script>
---恢復內容結束---
---恢復內容結束---
