开始之前,我要强调一件事情,看API事件很重要的事情,看API事件很重要的事情,看API事件很重要的事情!(真的很重要啊!)
为了要保证加载完页面上的DOM元素,再用jquery进行绑定相应的元素我们通常都用
$(document).ready(function(){这里放代码});或$(function(){这里放代码});
那么问题来了,如果页面上有通过 ajax 进行请求则成功返回有添加新的DOM元素
$(ajax){
type: "get",
url: 'url地址',
data:{
'参数': '值'
},
success: function(data){
$('body').append(<li id="new">new LI</li>);
},
error: function(data){
alert("fail");
}
})
Ajax 的请求都是在$(document).ready(function(){})
之后执行的,所以如果你想对新增的 li 标签进行绑定相应的事件,我所知有两种方法:
- 对新增元素 再次进行绑定相应事件,例如在 Ajax 中的 success 返回函数中,再执行完新增元素的代码后进行绑定
-
success: $('body').append("<li id='new'> new Li </li>"); //这里统一用click事件为例 $('#new').click(function(){});
当然这种方式有一定的局限性,那么可以尝试第二种方式
- jquery中有诸多的绑定事件函数(具体的将在文章末尾进行简单的介绍)
-
//这里我们用到的是 on()函数/(当然你也可以用 live()函数进行绑定,他们之间的区别将在末尾介绍); $("body").on('click','#new',function(){ alert("捕获新增的id为 new 的 li 标签"); } });
.on()函数的用于为指定元素的一个或多个事件绑定事件处理函数
最主要的是 on()函数执行后新添加,绑定事件对其依然有效//简单的演示on() // 为div中的所有p元素绑定click事件处理程序 // 只有n2、n3可以触发该事件 $("div").on("click","p",function(event){ alert( $(this).text()); }); // 后添加的n6也可以触发上述click事件,因为它也是div中的p元素 $("#n1").append('<p id="n6">上述绑定的click事件对此元素也生效!</p>');
以上则可以解决怎么用 jquery 绑定新增 DOM元素了!!
- 大致介绍一下 jquery的绑定函数 和之间的区别(具体参考Jquery API 文档):
-
要极为重要的注意jquery版本的不同带来的事件差异
//为一个元素绑定一个事件处理程序
.bind()//为所有匹配选择器(selector参数)的元素绑定一个或多个事件处理函数,基于一个指定的根元素的子集,匹配的元素包括那些目前已经匹配到的元素,也包括那些今后可能匹配到的元素。
.delegate()//从元素中删除先前用.live()绑定的所有事件.
.die()(弃用 > 1.7 版本弃用的 API | 已删除的函数)//接受一个函数,然后返回一个新函数,并且这个新函数始终保持了特定的上下文语境。
jQuery.proxy()//附加一个事件处理器到匹配目前选择器的所有元素,现在和未来。
.live()(弃用 > 1.7 版本弃用的 API | 已删除的函数)//移除一个事件处理函数。
.off()//在选定的元素上绑定一个或多个事件处理函数。
.on()//为元素的事件添加处理函数。处理函数在每个元素上每种事件类型最多执行一次。
.one()//从元素上删除一个以前附加事件处理程序。
.unbind()再次强调看API很重要,我就死在版本问题上导致事件不能相应,纠结许久。。。