jQuery获取不到新添加的内容 新元素快到碗里来2014-12-18 14:33:49
jQuery是一款应用面广、操作便捷、兼容性好的JS插件，在使用过程中常会遇到这样一个问题，那就是如何获取新添加的元素内容？
首先要区分jQuery的版本，如果不知道的话，特别是名称类似jQuery.min.js可以打开文件在头部注释部份就可以看到版本信息。
下面开始举例说明获取方法：
正常低版本的，针对新添加的元素时需要用到live()方法，从jQuery1.3中增加
<div class="testDiv"></div>
$(".testDiv").live("click", function(){
//console.log($(this).html());
});值得一提的是：与bind()不同，live()一次只能绑定一个事件。
这个方法跟传统的bind很像，区别在于用live来绑定事件会给所有当前以及将来在页面上的元素绑定事件(使用委派的方式)。比如说，如果你给页面上所有的li用live绑定了click事件。那么当在以后增加一个li到这个页面时，对于这个新增加的li，其click事件依然可用。而无需重新给这种新增加的元素绑定事件。
.live()与流行的liveQuery插件很像，但有以下几个主要区别：
.live 目前只支持所有事件的子集，支持列表参考上面的说明。
.live 不支持liveQuery提供的“无事件”样式的回调函数。.live只能绑定事件处理函数。
.live 没有”setup”和”cleanup”的过程。因为所有的事件是委派而不是直接绑定在元素上的。
要移除用live绑定的事件，请用die方法
对于高版本的jQuery引入了on()方法；jQuery1.7
on()对应着off();其实on方法的引入是为了考虑到效能因素，近而取代了bind(), live(), delegate()三个方法
on()方法可算是个全能儿！雪炭网－雪中送炭－乐趣无限！
函数原型：on(events,[selector],[data],fn)
events:一个或多个用空格分隔的事件类型和可选的命名空间，如"click"或"keydown.myPlugin" 。
selector:一个选择器字符串用于过滤器的触发事件的选择器元素的后代。如果选择器为null或省略，当它到达选定的元素，事件总是触发。
data:当一个事件被触发时要传递event.data给事件处理函数。
fn:该事件被触发时执行的函数。 false 值也可以做一个函数的简写，返回false。
<div class="testDiv"><span class="testSpan">this is a test.</span></div>
以下调用是不是很Cool
$(".testDiv .testSpan").on({
mouseenter:function(){
//blah , blah , blah
},
mouseleave:function(){
//blah , blah , blah
},
click:function(){
//blah , blah , blah
}
})值得一提的是：mouseenter与mouseout为啥不用mouseover,mouseout,呵呵，多用几次你会发现，前两者可以有效的防止冒泡事件的发生
引申：处理函数冒泡的最有效方式可以在结束时return false;效果比event.preventDefault()还好用。
一切如此美好，但在调用的时候悲剧的是也有可能会遇到这个问题：有的时候on并没有获得到新添加的元素，怎么回事，难道on()升级后还不如bind()方法了？
没错，这是我当初的疑问，事实原因是需要深度绑定！这个也是我纠结了好久的问题，还是一个老外的指点，thanks!
现在来看，遇到这个问题，要么回退低一点的版本，1.8或1.9都可以，但我用的是2.0.3
解决方法如下：
$("div.testDiv").on({
mouseenter:function(){
//blah , blah , blah
},
mouseleave:function(){
//blah , blah , blah
},
click:function(){
//blah , blah , blah
}
},".testSpan");这是为什么呢，谁管那么呢，到碗里来就行了(我也不清楚哒)，欢迎探讨，哈哈
原文链接(Hyperlink)：https://snowcoal.com/article/703.html
原创内容，尊重版权，转载需注明出处；商业及其他特殊用途转载需原作者同意。
有用，超赞！