JQuery:动态添加标签绑定事件
程序员文章站
2022-04-24 18:48:29
...
说明
采用JQuery技术先获取页面元素,然后再在后面追加元素的时候(append),在下面用 $(selector) 获取刚刚添加的标签,发现怎么都获取不到。
之所以这样原因是因为页面已经将JS加载完毕,此时新增请求动态添加节点,自然获取不到。
动态添加的标签要事件委托才能获取到节点,具体解决办法:
- 通过on绑定事件(注意使用on绑定事件时,hover无效,因为on的参数只能传一个函数)
- live绑定:
- delegate绑定:
语法:
$(selector1).on(events,[selector2],[data],fn)
参数 | 描述 |
---|---|
events | 一个或多个用空格分隔的事件类型和可选的命名空间 |
selector2 | 可选。一个选择器字符串,用以过滤选定的元素,该选择器的后裔元素将调用处理程序。如果选择是空或被忽略,当它到达选定的元素,事件总是触发。 |
data | 可选。作为event.data属性值传递给事件对象的额外数据对象以供事件处理函数处理 |
fn | 该事件被触发时执行的函数。 false值也可以做一个函数的简写,返回false |
注意:
- 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>
上一篇: HttpClient设置超时(转)