语法规则:
$(selector).delegate(childSelector,event,data,function)参数:
参数描述childSelector必需。规定要附加事件处理程序的一个或多个子元素。event 必需。规定附加到元素的一个或多个事件。由空格分隔多个事件值。必须是有效的事件。data可选。规定传递到函数的额外数据。function 必需。规定当事件发生时运行的函数。html:
<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"> <title></title> <style type="text/css"> button{ background-color: #ffffff; } </style> </head> <body> <div style="background-color:green"> <p>这是一个段落。</p> <p>请点击任意一个 p 元素,它会消失。包括本段落。</p> <button>在本按钮后面插入一个新的 p 元素</button> </div> <p><b>注释:</b>通过使用 delegate() 方法,而不是 live(),只有 div 元素中的 p 元素会受到影响。</p> <script type="text/javascript" src="js/jquery.min.js"></script> <script type="text/javascript"> $(document).ready(function(){ $("div").delegate("p","click",function(){ //this表示为p对象 $(this).slideToggle(); }); $("button").click(function(){ $("<p>这是一个新段落。</p>").insertAfter("button"); }); }); </script> </body> </html>html:
<html> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"> <title>live 事件</title> </head> <body> <p>这是一个段落。</p> <p>点击任意 p 元素会令其消失。包括本段落。</p> <button>在本按钮后面插入新的 p 元素</button> <p><b>注释:</b>通过使用 live() 方法而不是 bind() 方法,新的 p 元素同样会在点击时消失。</p> <script type="text/javascript" src="js/jquery.min.js"></script> <script type="text/javascript"> $(document).ready(function(){ $("p").live("click",function(){ $(this).slideToggle(); }); $("button").click(function(){ $("<p>This is a new paragraph.</p>").insertAfter("button"); }); }); </script> </body> </html>