1200字范文,内容丰富有趣,写作的好帮手!
1200字范文 > JQuery:动态添加标签绑定事件

JQuery:动态添加标签绑定事件

时间:2022-09-19 17:09:28

相关推荐

JQuery:动态添加标签绑定事件

说明

采用JQuery技术先获取页面元素,然后再在后面追加元素的时候(append),在下面用 $(selector) 获取刚刚添加的标签,发现怎么都获取不到。

之所以这样原因是因为页面已经将JS加载完毕,此时新增请求动态添加节点,自然获取不到。

动态添加的标签要事件委托才能获取到节点,具体解决办法:

通过on绑定事件(注意使用on绑定事件时,hover无效,因为on的参数只能传一个函数)live绑定:delegate绑定:

语法:

$(selector1).on(events,[selector2],[data],fn)

注意

selector1 为动态添加节点的父级节点,请使用非动态添加的父级节点,不然同样获取不到。请委托给直接上级非动态添加节点,不要扩大范围,否则可能会造成一次点击多次执行情况!

示例

<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>Title</title></head><body><div id="sth1"><button id="btn1">btn1</button></div><div id="sth2"></div><div id="sth3"></div><script src="jquery/jquery-2.1.1.min.js"></script><script type="text/javascript">$("#btn1").click(function () {//能正常触发事件alert("btn 111");});$(function () {$("#sth2").append('<button id="btn2">btn2</button>');$("#sth3").append('<button id="btn3">btn3</button>');});$("#btn2").click(function () {//不能正常触发事件alert("btn 222");});$("#sth3").on("click","#btn3",function () {//能正常触发事件alert("btn 333");});</script></body></html>

本内容不代表本网观点和政治立场,如有侵犯你的权益请联系我们处理。
网友评论
网友评论仅供其表达个人看法,并不表明网站立场。