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的方式给元素恰如其分的施加行为。
分享到:
相关推荐
3. jQuery中的事件委托技术:为了解决动态元素的事件处理问题,jQuery引入了一种名为“事件委托”的技术。事件委托允许我们将事件监听器绑定到一个父级元素上,而不是直接绑定到目标元素上。这样,即使目标元素是...
iOS 中 4 种 UI 元素的可用性问题和优化建议 在 iOS 开发中,设计师需要遵守 Apple 所提供的设计指南,以确保产品的质量和一致性。但是,在实际应用中,这些设计指南未必能完全适用于所有情况。在这篇文章中,我们...
在较早的jQuery版本中,.live()方法被引入,用来解决动态元素的事件绑定问题。.live()方法能够为当前和未来(通过脚本动态添加的)所有匹配选择器的元素绑定事件处理器。不过,从jQuery 1.7版本开始,推荐使用.on()...
标题中的“浏览器低级版本不识别元素问题”指的是在使用较旧版本的浏览器时,可能会遇到某些HTML5新引入的元素或特性不被支持的情况。这些元素和特性是为了提升网页的交互性和表现力,但在IE8及更早版本,或者没有...
在Flash批量上传图片功能上,KindEditor 4.1.12修复了按钮不显示的bug,这可能是因为在某些浏览器或操作系统环境下,Flash元素的渲染出现了问题。修复这个问题通常涉及调整Flash对象的嵌入方式,确保兼容性,或者...
【描述】:“亲证可用,真实有效,压缩包里有使用的具体说明,按照要求,绝对可以解决Tomcat的跨域问题” 这意味着我们可以通过修改Tomcat的配置来允许特定的跨域请求。这个压缩包包含了解决这个问题的详细步骤,...
本文讨论的"tt端11.70.28可用的全汉化无壳的main.exe(解决爆卡问题)",是一个涉及游戏客户端更新的具体案例,它不仅表明了一个游戏版本的迭代,还反映出游戏优化和用户界面本地化的趋势。 首先,tt端这个名词可能...
以上是关于“WPF解决ViewBox不显示线的问题”的详细解析和解决方案。通过理解问题的原因和应用相应的策略,开发者可以确保线状图形在ViewBox中始终清晰可见,提升WPF应用的用户体验。在实际项目中,根据具体需求和...
在网页设计和开发过程中,我们经常需要对用户的交互行为做出响应,其中控制按钮的可用状态是最常见的一种操作...同时,了解这些技术的细节有助于开发者在实际项目中更有效地解决相似的问题,提升代码的维护性和扩展性。
在jQuery中,`append()`函数是一个非常常用的方法,它允许我们在DOM(Document Object Model)元素中添加新的内容。当尝试向HTML表格(`<table>`)追加数据时,通常会遇到浏览器兼容性问题,尤其是对于较旧的浏览器...
针对"WiFi蓝牙不可用"的问题,解决方法可能包括以下步骤: 1. **查找兼容驱动**:由于拯救者R720的无线网卡和蓝牙芯片可能不是macOS原生支持的,需要寻找适用于该硬件的第三方驱动。例如,可以尝试找到与Intel或...
标题提到的"按钮控件(解决vb按钮功能不强的问题,免费!!)"正是为了解决这个问题而设计的增强型VB按钮控件。这种控件通过提供更多的自定义选项和功能,使得开发者可以创建出更具吸引力和用户友好性的界面。 首先...
这里,“非空”信号量表示消费者可以安全地从缓冲区中取元素,而“非满”信号量则表示生产者可以安全地向缓冲区中添加元素。信号量的值代表了对应资源的可用数量。 - **互斥锁**:互斥锁用于保护对共享资源的访问,...
为了解决在使用新版本jQuery时遇到的toggle()方法不被支持的问题,可以自定义一个兼容的函数。上述提供的代码段就是一个例子。这个自定义的toggle函数的作用是模仿旧版本jQuery中的toggle()方法的行为,使得开发者...
在IT行业中,开发Java Web应用时,我们常常使用集成开发环境(IDE)如MyEclipse进行项目构建。...在处理这类问题时,耐心和仔细的排查是关键,同时保持对新版本和社区支持的关注也是解决复杂问题的有效途径。
1. **事件委托**:将事件监听器添加到父元素上,而不是直接添加到A和B元素。这样,不论哪个子元素触发事件,都能正确捕获。在事件处理函数中,可以通过`event.target`判断实际触发事件的元素。 2. **条件修复**:如...
在描述中提到的“帮助解决无法找到 system.servicemodel 的问题”,通常这种情况表明开发环境中缺少了对 WCF 相关组件的引用或者配置不正确。要解决这个问题,开发者可能需要检查以下几点: 1. **添加引用**:确保...
标题"绝对可用的Multiselect Demo"意味着这个示例是一个经过验证的、可以直接使用的Multiselect插件实例,它避免了开发者在寻找并尝试各种示例时可能遇到的问题。 描述中的信息表明,作者在寻找适用于项目的jQuery ...
这样,QTP能够及时了解应用程序中所有可用的界面元素类,并对其进行进一步的识别和操作。 - **类加载信息获取**:QTP通过JVMTI的ClassPrepare事件,可以获取到类的详细信息,包括方法、字段和属性等,这对于识别Java...
使用Frameset时,每个框架都视为独立的文档,因此需要在每个框架的页面加载事件中添加响应代码,如`page_onload`事件,以确保Session的一致性和可用性。 6. **了解浏览器差异:** 不同浏览器对P3P、Cookies和...