jQuery如何获取动态添加的元素

一、问题描述

在使用jQuery的append()方法动态添加HTML代码片段之后，你可能会遇到一个难题：无法为这些新添加的元素绑定click事件。这是一个常见的问题，但幸运的是，有解决方案。

二、解决方案

你可能会尝试使用live()方法来为动态添加的元素绑定事件。需要注意的是，从jQuery 1.9版本开始，live()方法已经被废弃，不再推荐使用。取而代之的是更为强大和灵活的on()方法。

on()方法不仅可以为当前存在的元素绑定事件，而且可以适用于未来动态添加的元素。这使得on()方法成为解决这个问题的理想选择。

三、代码演示及

下面是一个简单的示例代码，展示了如何使用on()方法为动态添加的元素绑定click事件。

HTML页面：

```html

Click me!

Hello,

```

JavaScript代码（test.js）：

```javascript

$(document).ready(function(){

$("click1").on("click", function(){ // 使用on()方法绑定click事件到按钮上

$("p").append("

"); // 动态添加元素到p标签内

});

// 使用on()方法为动态添加的.new元素绑定click事件

$("p").on("click", ".new", function(){ // 注意这里先找到原选择器p，再将动态添加的.new放在参数列表中

$(this).remove(); // 当点击时移除该元素

});

});

```

在JavaScript代码中，我们首先使用on()方法将click事件绑定到按钮上。当按钮被点击时，会向`

`标签内动态添加一个带有类名`.new`的`