delegate()方法jQuery中的jQuery用于向指定元素添加一个或多个事件处理程序, 这些事件处理程序是选定元素的子级, 并且还用于指定一个函数, 以在事件发生时立即运行。
语法
$(selector).delegate( childSelector, event, data, function )参数：此方法接受上述和以下所述的四个参数：
- childSelector：它是必填参数, 用于指定附加到事件处理程序的一个或多个子元素。
- 事件：它是必填参数, 用于指定附加到元素的一个或多个事件。多个事件值由空格分隔, 并且必须是有效事件。
- 数据：它是一个可选参数, 用于指定要传递给该函数的其他数据。
- function：它是必需的参数, 用于指定事件发生时要运行的功能。
范例1：
<!DOCTYPE html>
< html >
< head >
< title >
delegate() Method in jQuery
</ title >
< script src =
"https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js" >
</ script >
<!-- jQuery script to add events -->
< script >
$(document).ready(function() {
$("div").delegate("h3", "click", function() {
$("h3").css("background-color", "green");
});
});
</ script >
</ head >
< body >
< center >
< h1 >Welcome to lsbin!</ h1 >
< p >
Click on the below element (lightgreen
background) to change background-color
</ p >
< div style = "background-color:lightgreen;" >
< h3 >lsbin</ h3 >
</ div >
< h3 >lsbin.</ h3 >
</ center >
</ body >
</ html >输出如下：
在单击元素之前：
单击元素后：
范例2：
<!DOCTYPE html>
< html >
< head >
< title >
delegate() Method in jQuery
</ title >
< script src =
"https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js" >
</ script >
<!-- jQuery script for delegate() method -->
< script >
$(document).ready(function(){
$("div").delegate("h3", "click", function(){
$(this).slideToggle();
});
$("button").click(function(){
$("< h3 >This show how the delegate Method"
+ " works .</ h3 >").insertAfter("button");
});
});
</ script >
</ head >
< body >
< center >
< h1 >Welcome to lsbin!.</ h1 >
< div style = "background-color:green" >
< h3 >lsbin.</ h3 >
< h3 >The delegate Method.</ h3 >
< button >Click</ button >
</ div >
</ center >
</ body >
</ html >输出如下：
之前单击按钮：
单击按钮后：
