jQuery 给我们提供了强大的 JS 库. 我们可以用 jQuery 脚本向页面添加元素, 随着程序进行添加的元素怎么添加事件呢? 就需要使用 delegate 了. delegate() 方法可以为已有或新添加的页面元素绑定已定义的事件:
如下:
html:
- <body>
- <div>
- <span>
- 123
- </span>
- <button>
- 添加
- </button>
- </div>
- </body>
jQuery:
- $(function(){
- // 定义测试函数
- function foo(){
- alert($(this).text())}
- // 已有元素
- $("div span").on('click',foo)
- // 点击按钮添加新元素
- $("div button").click(function(){
- $("div").append("<span>123</span>")
- })
- // 给新元素绑定事件
- $("div").delegate('span','click',foo)
- //$("div").undelegate('click')
- })
这样就可以为添加的新元素绑定事件, 并且原有的 span 元素会弹出两次文本内容, 证明 delegate 也给匹配到的当前的元素绑定了事件.
如果想要消除绑定很简单:
$("div").undelegate('click')
删除由 delegate 委派绑定的事件, 不是通过 delegate 委派的事件则不会删除.
来源: http://www.bubuko.com/infodetail-2890565.html