描述
delegate() 为指定的元素(被选元素的子元素)添加一个或多个事件处理程序,并规定当这些事件发生时运行的函数。使用 delegate() 方法的事件处理程序适用于当前或未来的元素(比如由脚本创建的新元素)。
使用方式
$(selector).delegate(childSelector,event,data,function)
childSelector: 必需项;需要添加事件处理程序的元素,一般为selector的子元素;
event:必需项;添加到元素的一个或多个事件,例如 click,dblclick等;
单事件处理:例如 $(selector).delegate(childselector,"click",data,function);
多事件处理:1.利用空格分隔多事件,例如 $(selector).delegate(childselector,"click dbclick mouseout",data,function);
2.利用大括号灵活定义多事件,例如 $(selector).delegate(childselector,{event1:function, event2:function, ...})
3.空格相隔方式:绑定较为死板,不能给事件单独绑定函数,适合处理多个事件调用同一函数情况;
大括号替代方式:绑定较为灵活,可以给事件单独绑定函数;
data:可选;需要传递的参数;
function:必需;当绑定事件发生时,需要执行的函数;
注意
该方法 “ 适用于当前或未来的元素(比如由脚本创建的新元素)”。
例如:在页面加载完成之后,由脚本创建的新元素无法通过click()方法触发点击事件,但是用$(selector).delegate(childSelector,“click”,data,function)就可以触发。
<body> <div Id="tab1">点击生成新元素</div> <div Id="tab2"></div> </body> //生成新元素 $("tab1").click(function () { $("#tab2").html('<div class="btn_autoreport">点击</div>'); }); //无法触发 $(".btn_autoreport").click( function () { alert("click方法"); }); //可以触发 $("body").delegate.(".btn_autoreport","click", function () { alert("delegate方法"); });
文章转载自:快速开发平台– 云微平台
地址:https://www.hocode.com/