jQuery 可以给多个元素绑定同一事件吗? 下面本篇文章给大家介绍一下. 有一定的参考价值, 有需要的朋友可以参考一下, 希望对大家有所帮助.
jQuery 可以给多个元素绑定同一事件. 例如可以使用 jQuery delegate()来绑定多个元素或事件.
delegate() 绑定多个元素或事件
delegate()方法为指定的元素 (属于被选元素的子元素) 添加一个或多个事件处理程序, 并规定当这些事件发生时运行的函数.
使用 delegate() 方法的事件处理程序适用于当前或未来的元素(比如由脚本创建的新元素).
语法:
$(selector).delegate(childSelector,event,data,function);
childSelector: 规定要附加事件处理程序的一个或多个子元素., 要用逗号隔开, 比如 "p,span",
event: 属于什么事件, 可以是多个事件属性, 要用空格隔开, 比如 "click mouseover", 选中的元素既可以通过单击事件实现, 用鼠标悬停也可以实现同样的效果.
data: 可选, 规定传递到函数的额外数据.
function: 当事件发生时运行的函数.
示例: 给 < p > 和 < span > 元素绑定同一事件
- <!DOCTYPE html>
- <HTML>
- <head>
- <script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js" type="text/javascript">
- </script>
- <script type="text/javascript">
- $(document).ready(function() {
- $("div").delegate("p,span", "click",
- function() {
- $(this).slideToggle(); // 通过使用滑动效果, 在显示和隐藏状态之间切换
- })
- })
- </script>
- </head>
- <body>
- <div>
- <p style="background-color: red;">
- 这是一个段落
- </p>
- <p style="background-color: red;">
- 请点击任意一个段落
- </p>
- <span style="background-color: red;">
- span, 点击一下
- </span>
- </div>
- </body>
- </HTML>
效果图:
更多 web 前端开发 https://www.html.cn/ 知识, 请查阅 HTML 中文网 !!
来源: http://www.css88.com/qa/jquery/16899.html