delegate说起对未来元素是其作用的，于是写下代码：
<!DOCTYPE HTML> <html> <head> <meta charset="utf-8"> <meta http-equiv="x-ua-compatible" content="ie=edge"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>知几 - 教师端</title> <meta name="description" content=""> <link rel="apple-touch-icon" href="http://cdn.dev.tiplus.cn/client-teacher/apple-touch-icon.png"> <script type="text/javascript" src="jquery.min.js"></script> </head> <body> <p class="xxx">click</p> <div id="a"></div> <li class="add_reason"><span>xx</span></li> <script type="text/javascript"> $(".xxx").click(function(){ $("#a").append('<li class="add_reason"><span style="display:block;">xx</span></li>'); }) $(".add_reason").delegate("span", "click",function(){ alert("ddd"); }); </script> </body> </html>
其实不然，对与通过点击xxx元素新加的html，根本没有作用。
错误： 页面出现动态添加元素时，添加元素的事件用普通的方法，无法响应。
原因： 普通添加的事件，只是在document.ready时绑定的已有元素事件，所以动态添加的元素，在document.ready时不存在，所以也无法绑定元素事件，无法对事件进行响应。
这时候，需要用到上面的三个绑定方法；这三个方法只所以成功，是因为这三个方法是绑定到document上，如果元素发生变化，也都是从document开始找，动态添加的元素也能被重新查找时所发现，所以事件能够响应。换成如下代码，成功执行：
<!DOCTYPE HTML> <html> <head> <meta charset="utf-8"> <meta http-equiv="x-ua-compatible" content="ie=edge"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>知几 - 教师端</title> <meta name="description" content=""> <link rel="apple-touch-icon" href="http://cdn.dev.tiplus.cn/client-teacher/apple-touch-icon.png"> <script type="text/javascript" src="jquery.min.js"></script> </head> <body> <p class="xxx">click</p> <div id="a"></div> <li class="add_reason"><span>xx</span></li> <script type="text/javascript"> $(".xxx").click(function(){ $("#a").append('<li class="add_reason"><span style="display:block;">xx</span></li>'); }) $(document).on('click', '.add_reason',function() { alert("2"); }); </script> </body> </html>
完毕。