使用jQuery的.on()方法绑定事件,它可以在动态添加的元素上也能生效; 例子
时间: 2024-02-09 14:10:30 浏览: 65
好的,下面是一个使用 $.on() 方法绑定动态添加元素的例子:
HTML 代码:
```html
<div id="container">
<button id="btn">点击添加元素</button>
</div>
```
JavaScript 代码:
```javascript
// 绑定按钮点击事件
$('#btn').on('click', function() {
// 动态创建元素
var $newElem = $('<p>我是动态添加的元素</p>');
// 将元素添加到容器中
$('#container').append($newElem);
});
// 绑定动态添加元素的点击事件
$('#container').on('click', 'p', function() {
alert('你点击了动态添加的元素');
});
```
这段代码中,先绑定了按钮的点击事件,当按钮被点击时,动态创建了一个 p 元素,并将其添加到容器中。然后通过 $.on() 方法绑定了容器的点击事件,并指定了要绑定的元素选择器为 p,这样当动态添加的 p 元素被点击时,就可以触发绑定的事件处理函数了。
相关推荐
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![zip](https://img-home.csdnimg.cn/images/20210720083736.png)
![zip](https://img-home.csdnimg.cn/images/20210720083736.png)
![xlsx](https://img-home.csdnimg.cn/images/20210720083732.png)
![xlsx](https://img-home.csdnimg.cn/images/20210720083732.png)
![zip](https://img-home.csdnimg.cn/images/20210720083736.png)