解决“新添加的元素,事件不可用”的问题

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);
});

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的方式给元素恰如其分的施加行为。
  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值