JavaScript動態繫結事件
阿新 • • 發佈：2018-12-19
什麼是動態繫結事件？
js最突出優點在於能動態修改頁面樣式和動態修改頁面內容，然而在我們開發過程中，將動態新增的元素中繫結事件的現象稱為動態繫結事件。
動態繫結無法觸發js的案例？
<html> <head> <meta charset="UTF-8"> <title></title> </head> <body> <table> <tbody> <tr> <td>1</td> <td>2</td> </tr> </tbody> </table> </body> <script type="text/javascript" src="jquery-2.1.1.min.js"></script> <script> //頁面就緒化 $(function(){ $("td").click(function(){ $("<td>2</td>").appendTo("tr"); }); }); }); </script> </html>
案例分析：在簡單的js新增td案例中，js取到td,單擊td動態新增一行td，value=3；在動態新增的td單擊卻無法繼續新增，而單擊靜態td可繼續新增。
處理動態繫結失效的方法
// js部分
$(function(){
$("tr").on("click","td",function(){
$("<td>2</td>").appendTo("tr");
});
});
分析：通過查閱相關說明，發現jQuery的on()方法是支援在動態新增的元素上繫結事件的。 當將上述事件不繫結在tr上而是繫結在td上時，無法觸發生成td事件，而繫結在tr父節點上，不僅可以新增td，並且動態產生的td也可以觸發生成td。