jQuery on()绑定动态元素出现的问题小结

jQuery on()方法是官方推荐的绑定事件的方法。对于开发者来说，这是一个强大的工具，特别是对于那些需要处理动态生成的元素的事件时。

过去，开发者可能会使用传统的绑定方式，如使用$("").on('click','function(){ }')。当面临动态生成的元素时，这种绑定方式可能会出现问题。我们需要采用更为灵活的方法。

jQuery的on()方法提供了一个很好的解决方案。其基本用法是$(document).on(事件类型, 选择器, 函数)。这种方法允许我们为动态生成的元素绑定事件。例如，当页面中的某个元素发生变化时，我们可以使用$(document).on("change","pageSize_out",function(){ })来绑定事件。这种方法的关键在于将事件监听器绑定到最精确的元素上，避免不必要的处理。这意味着如果你正在向id为a的元素添加一个class为b的子元素，那么你应该使用$('a').on('click', '.b', function(){})而不是$(document.body).on('click', 'a .b', function(){})。这样可以确保事件只在特定的元素上触发，提高效率。

在使用on()方法时，需要注意避免重复添加具有相同id的元素。在HTML中，具有相同id的元素是不被允许的，这可能会导致各种问题。我们还需要注意on()方法的参数：事件类型、选择器、数据和函数。当选择器为null或省略时，事件将在选定元素到达时触发。数据参数允许我们在触发事件时将额外的信息传递给事件处理函数。关于函数参数，除了常规的处理函数外，也可以传入false值以返回false作为函数的简写。

on()方法在替换bind()和live()方法时具有很大的优势。当不需要选择器参数时，on()和bind()的用法几乎相同。当需要处理动态元素的事件时，on()的优势就体现出来了。与live()类似，on()可以通过将事件绑定到document来使动态元素具有相同的事件处理效果。与live()相比，on()提供了更多的灵活性和控制力，因此是处理动态元素事件的更好选择。理解并正确使用jQuery的on()方法对于现代web开发至关重要，特别是对于那些需要处理动态生成元素的事件的情况。jQuery中on()方法的使用及其优势

在jQuery中，事件处理是一个核心功能。随着版本的更迭，为了统一接口和提高性能，on()方法逐渐取代了bind(), live(), delegate()等方法。接下来，我们将详细on()方法的使用及其优势。

一、on()方法的基本使用

1. 基本事件绑定：

```javascript

$('list li').on('click', function() {

// function code here.

});

```

在此代码中，任何'list li'元素上的点击事件都会触发指定的函数。

2. 代理事件绑定：

使用on()实现代理的写法与delegate()基本一致。例如：

delegate()的写法：

```javascript

$('list').delegate('li', 'click', function() {

// function code here.

});

```

on()的写法：

```javascript

$('list').on('click', 'li', function() {

// function code here.

});

```

在这两种写法中，当'list'下的任何'li'元素发生点击事件时，都会触发指定的函数。这种代理方式特别适用于动态添加的元素。

二、on()方法的优势

1. 统一性：on()方法统一了事件绑定的接口，使得学习和使用更加简便。

2. 高性能：相较于live()方法，on()方法在性能上有所优化，尤其是在处理大量事件时。

3. 灵活性：通过调整选择器，on()方法可以灵活地绑定事件到任何元素，包括动态添加的元素。这是live()和delegate()方法的核心优势之一。例如，下面的代码展示了如何为动态添加的div绑定click事件：

错误的用法：

```javascript

// 先绑定事件再添加div

$('test .evt').on('click', function() {alert($(this).text())});

$('test').append('

```

在此错误用法中，只为第一个class为evt的div绑定了click事件，动态创建的div则没有绑定。

正确的用法：

```javascript

// 使用on()方法绑定动态元素的事件

$('body').on('click', 'test .evt', function() {alert($(this).text())});

$('test').append('

```

在此正确用法中，无论何时添加新的class为evt的div，其click事件都会被正确绑定。这是因为事件绑定在了body元素上，而不仅仅是已经存在的test .evt元素。这种代理方式使得动态元素的事件绑定变得简单而强大。

on()方法是jQuery中处理事件的首选方法，其灵活性、统一性和高性能使其成为live(), bind(), delegate()等方法的理想替代者。