使用Jquery的鲜活绑定(lively-ness)，解决“新添加的元素，事件不可用”的问题

2012.05.16更新

这是一篇老文章了，推荐使用Javascript事件代理来解决。 

 

这是个老问题，本人正好遇到，发上来备份一下。先看代码

HTML页面：

<a id="AddInput">添加文本框</a>
<input type="text" name="inp">
<input type="text" name="inp">

JS代码：

$(document).ready(function(){
    $("input[name='inp']").change(function(){
        alert(this.value);
    });
    $("#AddInput").click(function(){
        $("input[name='inp']:last-child").after("<input name='inp' type='text' />");
    })
)}

要求：当点击AddInput时，添加一个name为inp的文本框，当所有name为inp的文本框change时，提示该文本框内的值。
问题：原有DOM上的两个文本框可以绑定上change事件，但是，通过AddInput.click生成的就没有。
解决：使用Jquery的Live Query插件，JS代码改为

$("input[name='inp']").livequery('change',function(){
        alert(this.value);
    });

 

原理和详细参见：http://www.infoq.com/cn/news/2007/08/livequery

Live Query插件：为JQuery带来活跃DOM绑定能力
作者 James Estes 译者 岳立东
Live Query是一个新的jQuery插件，你可以用它给匹配的DOM元素注册事件或者激发回调函数。不仅是当前与选择器匹配的元素，还有后续通过Ajax添加的元素都会得到绑定。当元素不再和选择器匹配时，它也会自动取消事件注册。在对Ajaxian上一篇文章的评论中，John Resig指出Live Query与Prototype和Dojo中其它类似工具的不同之处在于（这里强调我的观点）：
你给[Live Query]一个jQuery选择器，[Live Query]会实时地在整个DOM范围把它持久化。这意味着你可以设定一个查询（并且再也不必去重新调用或者初始化它）它的效果在所有地方都会见到：就像是CSS。这是一个着实重要的区别，同时我很高兴它几乎没什么速度损失的开销就做到了。
这种绑定的“鲜活性（lively-ness）”相当有意思。这个插件每20毫秒做一次检查，看是否经由其它jQuery调用进行过DOM操作。如果一个 jQuery动作修改了DOM，那活跃绑定就被重新评估。这暗示在jQuery之外的DOM操作不会触发重新评估。这实在快要成了真正流畅（fluid）（并活跃（live））、跨浏览器的机制，可以通过类似CSS的方式给元素恰如其分的施加行为。
Live Query下载和API:
http://blog.brandonaaron.net/2007/08/19/new-plugin-live-query/