jquery新创建元素事件

Hey小伙伴们，今天要跟大家分享一个超级实用的话题——如何用jQuery给新创建的元素添加事件，是不是听起来有点小复杂？别担心，我会用最简单易懂的方式，一步步带你了解这个功能的强大之处。

我们得明白，jQuery是一个快速、小巧且功能丰富的JavaScript库，它可以让HTML文档遍历和操作、事件处理、动画和Ajax等操作变得简单，而我们今天要聊的，就是jQuery中的事件处理功能。

想象一下，你正在开发一个动态的网站，需要在用户与页面交互时添加新的元素，并且希望这些新元素能够响应用户的点击或其他操作，这听起来是不是有点挑战性？但别急，jQuery来帮忙！

### 1. jQuery事件委托

事件委托是一种技术，允许你给父元素添加一个事件处理器，这个处理器可以监听来自子元素的事件，这样做的好处是，即使这些子元素是后来动态添加的，事件处理器依然有效，这在处理动态内容时非常有用，因为你不需要为每个新添加的元素单独绑定事件。

### 2. 使用`.on()`方法

jQuery的`.on()`方法可以用来绑定事件，包括那些发生在新创建元素上的事件，这个方法的语法如下：

```javascript

$(selector).on(event, handler);

```

- `selector`是你想要绑定事件的元素的选择器。

- `event`是你想要监听的事件类型。

- `handler`是当事件触发时执行的函数。

### 3. 动态元素的事件绑定

当你创建了一个新元素并将其添加到DOM中时，你可能会想要为这个新元素添加事件，如果你直接在新元素上绑定事件，那么这个事件可能不会工作，因为元素还没有被添加到DOM中，这时，事件委托就派上用场了。

### 4. 示例：动态添加按钮并绑定点击事件

让我们通过一个简单的例子来说明这个过程：

```html

```

在这个例子中，我们有一个按钮，当点击这个按钮时，会创建一个新的按钮并添加到页面中，我们为这个新按钮绑定了一个点击事件，如果我们直接在`newButton`上绑定事件，这个事件可能不会工作，因为`newButton`还没有被添加到DOM中，为了避免这个问题，我们可以将事件绑定到一个已经存在于DOM中的父元素上，然后使用事件委托。

### 5. 使用事件委托

修改上面的代码，使用事件委托来绑定事件：

```javascript

$(document).ready(function(){

$('#addButton').click(function(){