$(document).ready(function(){ var eleSize = 10; //增加初始化元素 var innerHtml = "<ul>"; for(var i=0; i<eleSize; i++){ innerHtml += "<li>第 "+i+" 个</li>"; } innerHtml += "</ul>"; document.getElementById("leftCon").innerHTML = innerHtml; document.getElementById("rightCon").innerHTML = innerHtml; //事件绑定 $("#leftCon").find("li").click(function(){ alert($(this).html()); }); //事件委托 $('#rightCon').delegate('li', 'click', function() { alert($(this).html()); }); //为事件绑定的增加元素 $("#left .btnNew").click(function(){ $("#leftCon ul").append("<li>新增元素</li>"); }); //为事件委托的增加元素 $("#right .btnNew").click(function(){ $("#rightCon ul").append("<li>新增元素</li>"); }); });
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>事件委托和事件绑定示例-新增元素测试</title> </head> <body> <div id="container" class="clearfix"> <h3>事件委托和事件绑定示例-新增元素的事件处理测试</h3> <div id="left"> <h4>事件绑定的示例 <span class="btnNew">点击新增元素</span></h4> <div id="leftCon" class="clearfix"></div> </div> <div id="right"> <h4>事件委托的示例 <span class="btnNew">点击新增元素</span></h4> <div id="rightCon" class="clearfix"></div> </div> </div> </body> </html>