`
ynztpwl
  • 浏览: 56481 次
  • 性别: Icon_minigender_1
  • 来自: 北京
社区版块
存档分类
最新评论

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

 
阅读更多
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的方式给元素恰如其分的施加行为。
分享到:
评论

相关推荐

    jQuery详细教程

    jQuery 使用名为 noConflict() 的方法来解决该问题。 var jq=jQuery.noConflict(),帮助您使用自己的名称(比如 jq)来代替 $ 符号。 亲自试一试 结论 由于 jQuery 是为处理 HTML 事件而特别设计的,那么当您遵循...

    VMware服务器虚拟化解决方案.doc

    VMware虚拟化解决方案 一、项目研究内容 1.1 虚拟化的应用 随着企业的成长,IT部门必须快速地提升运算能力-以不同操作环境的新服务器形式 而存在。因此而产生的服务器数量激增则需要大量的资金和人力去运作,管理和...

    IE6升级到IE9兼容性问题和操作手册

    3. 已解决SELECT 元素不能被div覆盖的问题。 14 第二节:IE7-IE8更新 14 1. 不再支持 CSS 表达式,改为支持增强的 CSS 或 DHTML 逻辑。 14 2. currentStyle 对象的Unset属性现在返回其初始值。 15 3. style 对象的 ...

    wordbreakleetcode-leetcode:力扣问题解决方案

    力扣问题解决方案 添加两个数字 DeleteColumnsToMakeSorted 翻转图像 实现StrStr 整数转罗马 宝石与宝石 最大周长三角形 最长公共前缀 最长回文子串 无重复字符的最长子串 最大二叉树 双排序数组的中位数 合并两个...

    KODExplorer 芒果云-资源管理器

    - 选中文件时,移动到屏幕可视区域(解决上下左右选中文件滚动条不一致问题) ###ver2.51 `2014/6/22` ---- ####fix bug:(bug解决和程序优化) - 登陆多次密码输入错误验证码bug解决 - 修复漏洞:创建副本加入...

    大名鼎鼎SWFUpload- Flash+JS 上传

    什么是SWFUpload?  SWFUpload是一个客户端文件上传工具...使用SWFUpload遇到的多数问题是由不正确地设置或者定义了糟糕的处理事件引起的。 初始化和设置 SWFpload必须在页面中初始化,一般可以在window.onload事件中...

    form-validation:解决验证问题

    &lt;&lt;&lt;&lt;&lt;&lt;&lt; HEAD 表单验证 我们创建了这个问题来评估开发人员如何解决现实世界的问题。 如果你被分配了这个...如果提交表单并发生错误,则错误元素的父元素应该添加一个 CSS error类。 &lt; p cl

    2服务器测试报告.doc

    1.1目的 该"测试计划"文档有助于完善网络环境,分析解决模块出现的问题: 确定现有项目的信息和应测试。 列出测试方法和策略,并对这些策略加以说明。 确定所需的资源和测试的工作量。 列出测试项目的可交付元素。 ...

    Learning+jquery中文版

    知识,建立健全的 jQuery 程序解决常见的问题。 在第八章中,你会掌握客户端验证的微妙之处,设计一个自适应的表单布局,并实现交互式 的客户端-服务器端的表单特性,例如自动完成功能。 在第九章中,你 将通过展示...

    PROJECT 2007宝典 9/9

     第9章 解决日程安排问题   9.1 解决日程安排冲突   9.1.1 向任务添加资源   9.1.2 使用加班时间   9.1.3 增加任务时间   9.1.4 调整可宽延时间   9.1.5 更改任务限制   9.1.6 调整相关性  ...

    PROJECT 2007宝典 7/9

     第9章 解决日程安排问题   9.1 解决日程安排冲突   9.1.1 向任务添加资源   9.1.2 使用加班时间   9.1.3 增加任务时间   9.1.4 调整可宽延时间   9.1.5 更改任务限制   9.1.6 调整相关性  ...

    PROJECT 2007宝典 1/10

     第9章 解决日程安排问题   9.1 解决日程安排冲突   9.1.1 向任务添加资源   9.1.2 使用加班时间   9.1.3 增加任务时间   9.1.4 调整可宽延时间   9.1.5 更改任务限制   9.1.6 调整相关性  ...

    PROJECT 2007宝典 8/9

     第9章 解决日程安排问题   9.1 解决日程安排冲突   9.1.1 向任务添加资源   9.1.2 使用加班时间   9.1.3 增加任务时间   9.1.4 调整可宽延时间   9.1.5 更改任务限制   9.1.6 调整相关性  ...

    PROJECT 2007宝典 5/9

     第9章 解决日程安排问题   9.1 解决日程安排冲突   9.1.1 向任务添加资源   9.1.2 使用加班时间   9.1.3 增加任务时间   9.1.4 调整可宽延时间   9.1.5 更改任务限制   9.1.6 调整相关性  ...

    PROJECT 2007宝典 6/9

     第9章 解决日程安排问题   9.1 解决日程安排冲突   9.1.1 向任务添加资源   9.1.2 使用加班时间   9.1.3 增加任务时间   9.1.4 调整可宽延时间   9.1.5 更改任务限制   9.1.6 调整相关性  ...

    PROJECT 2007宝典 3/9

     第9章 解决日程安排问题   9.1 解决日程安排冲突   9.1.1 向任务添加资源   9.1.2 使用加班时间   9.1.3 增加任务时间   9.1.4 调整可宽延时间   9.1.5 更改任务限制   9.1.6 调整相关性  ...

    PROJECT 2007宝典 2/9

     第9章 解决日程安排问题   9.1 解决日程安排冲突   9.1.1 向任务添加资源   9.1.2 使用加班时间   9.1.3 增加任务时间   9.1.4 调整可宽延时间   9.1.5 更改任务限制   9.1.6 调整相关性  ...

    PROJECT 2007宝典 4/9

     第9章 解决日程安排问题   9.1 解决日程安排冲突   9.1.1 向任务添加资源   9.1.2 使用加班时间   9.1.3 增加任务时间   9.1.4 调整可宽延时间   9.1.5 更改任务限制   9.1.6 调整相关性  ...

    DroppableView.js:Famo.us 中的快速拖放练习

    每当可拖动元素成功放入 Droppable 元素时,就会发出事件:'drop'。 该事件包含渲染元素为“draggable”和“droppable”,为进一步操作做好准备。 示例:main.js。 打开 index.html 看看。 add -- 向

Global site tag (gtag.js) - Google Analytics