html 未来元素绑定事件,jquery事件只绑定一次，未来新加的元素自动生效

今天跟我们的前端同学讨论了页面html元素事件绑定方式，突然想到一个问题：jquery只绑定一次事件，未来新加的元素怎么生效，一直以为是用on绑定对未来新加的元素也会生效，今天试验一把，颠覆了我原来的观念，看来还是要实践出真知啊。

下面我们看一个实例，效果是为ul的下面的所有li加上click事件。

• a
• b
• c

add-li

i = 1;

$(function () {

$("#btn").click(function () {

$("#lh").append("

" + i + "");

i++;

});

})

先来看一个比较拙劣的绑定事件的方式：

$("#lh li").on('click',function(){

alert($(this).text());

});

上面是实现了点击事件，但是每一个li都对应一个事件函数，有点资源浪费，而且未来新加的元素li是没有事件函数的，也就是当我们点击按钮为ul添加新的li时，新加的元素是没有click事件的。

改进方法：

$("#lh").on('click', "li", function () {

alert($(this).text());

});

思路是这样的：我们在要加事件的li的父元素ul绑定事件，并指定选择器li，这样既没有多次绑定导致的资源浪费问题，也解决了以后新加的元素也拥有事件问题。

=======================================

我们再来看看jquery的API，你就会明白：

on(events,[selector],[data],fn)

作用：

在选择元素上绑定一个或多个事件的事件处理函数。

参数

events,[selector],[data],fnV1.7

events:一个或多个用空格分隔的事件类型和可选的命名空间，如"click"或"keydown.myPlugin" 。

selector:一个选择器字符串用于过滤器的触发事件的选择器元素的后代。如果选择的< null或省略，当它到达选定的元素，事件总是触发。

data:当一个事件被触发时要传递event.data给事件处理函数。

fn:该事件被触发时执行的函数。 false 值也可以做一个函数的简写，返回false。

events-map,[selector],[data]V1.7

events-map:个用字符串表示的，一个或多个空格分隔的事件类型和可选的命名空间，值表示事件绑定的处理函数。

selector:一个选择器字符串过滤选定的元素，该选择器的后裔元素将调用处理程序。如果选择是空或被忽略，当它到达选定的元素，事件总是触发。

data:当一个事件被触发时要传递event.data给事件处理函数。