jQuery 事件 - live() 方法 概述
jQuery 2022-06-01 12:09:40小码哥的IT人生shichen
jQuery 事件 - live() 方法
实例
当点击按钮时，隐藏或显示 p 元素：
$("button").live("click",function(){
$("p").slideToggle();
});
完整实例：
<html>
<head>
<script type="text/javascript" src="https://apps.bdimg.com/libs/jquery/1.11.1/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("button").live("click",function(){
$("p").slideToggle();
});
});
</script>
</head>
<body>
<p>这是一个段落。</p>
<button>请点击这里</button>
</body>
</html>
可以使用本站在线JavaScript测试工具测试上述代码运行效果：http://www.phpcodeweb.com/runjs.html
定义和用法
live() 方法为被选元素附加一个或多个事件处理程序，并规定当这些事件发生时运行的函数。
通过 live() 方法附加的事件处理程序适用于匹配选择器的当前及未来的元素（比如由脚本创建的新元素）。
语法
$(selector).live(event,data,function)
| 参数 | 描述 |
|---|---|
| event |
必需。规定附加到元素的一个或多个事件。 由空格分隔多个事件。必须是有效的事件。 |
| data | 可选。规定传递到该函数的额外数据。 |
| function | 必需。规定当事件发生时运行的函数。 |
亲自试一试 - 实例
完整实例【向未来的元素添加事件处理器】：
<html>
<head>
<script type="text/javascript" src="https://apps.bdimg.com/libs/jquery/1.11.1/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>
</head>
<body>
<p>这是一个段落。</p>
<p>点击任意 p 元素会令其消失。包括本段落。</p>
<button>在本按钮后面插入新的 p 元素</button>
<p><b>注释：</b>通过使用 live() 方法而不是 bind() 方法，新的 p 元素同样会在点击时消失。</p>
</body>
</html>
可以使用本站在线JavaScript测试工具测试上述代码运行效果：http://www.phpcodeweb.com/runjs.html
如何使用 live() 方法向尚未创建的元素添加事件处理器。
