`
ynztpwl
  • 浏览: 59499 次
  • 性别: 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为动态生成的select元素添加事件的方法

    3. jQuery中的事件委托技术:为了解决动态元素的事件处理问题,jQuery引入了一种名为“事件委托”的技术。事件委托允许我们将事件监听器绑定到一个父级元素上,而不是直接绑定到目标元素上。这样,即使目标元素是...

    超干货iOS中4种UI元素的可用性问题和优化建议.pdf

    iOS 中 4 种 UI 元素的可用性问题和优化建议 在 iOS 开发中,设计师需要遵守 Apple 所提供的设计指南,以确保产品的质量和一致性。但是,在实际应用中,这些设计指南未必能完全适用于所有情况。在这篇文章中,我们...

    jQuery如何获取动态添加的元素

    在较早的jQuery版本中,.live()方法被引入,用来解决动态元素的事件绑定问题。.live()方法能够为当前和未来(通过脚本动态添加的)所有匹配选择器的元素绑定事件处理器。不过,从jQuery 1.7版本开始,推荐使用.on()...

    problem 浏览器低级版本不识别元素问题

    标题中的“浏览器低级版本不识别元素问题”指的是在使用较旧版本的浏览器时,可能会遇到某些HTML5新引入的元素或特性不被支持的情况。这些元素和特性是为了提升网页的交互性和表现力,但在IE8及更早版本,或者没有...

    kindeditor--4.1.12 解决flash批量上传图片按钮不显示与支持video视频

    在Flash批量上传图片功能上,KindEditor 4.1.12修复了按钮不显示的bug,这可能是因为在某些浏览器或操作系统环境下,Flash元素的渲染出现了问题。修复这个问题通常涉及调整Flash对象的嵌入方式,确保兼容性,或者...

    Tomcat配置解决跨域问题

    【描述】:“亲证可用,真实有效,压缩包里有使用的具体说明,按照要求,绝对可以解决Tomcat的跨域问题” 这意味着我们可以通过修改Tomcat的配置来允许特定的跨域请求。这个压缩包包含了解决这个问题的详细步骤,...

    tt端11.70.28可用的全汉化无壳的main.exe(解决爆卡问题)

    本文讨论的"tt端11.70.28可用的全汉化无壳的main.exe(解决爆卡问题)",是一个涉及游戏客户端更新的具体案例,它不仅表明了一个游戏版本的迭代,还反映出游戏优化和用户界面本地化的趋势。 首先,tt端这个名词可能...

    WPF 解决 ViewBox 不显示线的问题

    以上是关于“WPF解决ViewBox不显示线的问题”的详细解析和解决方案。通过理解问题的原因和应用相应的策略,开发者可以确保线状图形在ViewBox中始终清晰可见,提升WPF应用的用户体验。在实际项目中,根据具体需求和...

    JavaScript控制按钮可用或不可用的方法

    在网页设计和开发过程中,我们经常需要对用户的交互行为做出响应,其中控制按钮的可用状态是最常见的一种操作...同时,了解这些技术的细节有助于开发者在实际项目中更有效地解决相似的问题,提升代码的维护性和扩展性。

    jquery appen table 问题 ie8下解决方法

    在jQuery中,`append()`函数是一个非常常用的方法,它允许我们在DOM(Document Object Model)元素中添加新的内容。当尝试向HTML表格(`&lt;table&gt;`)追加数据时,通常会遇到浏览器兼容性问题,尤其是对于较旧的浏览器...

    拯救者R720黑苹果自用OC6.7WIFI蓝牙不可用.zip

    针对"WiFi蓝牙不可用"的问题,解决方法可能包括以下步骤: 1. **查找兼容驱动**:由于拯救者R720的无线网卡和蓝牙芯片可能不是macOS原生支持的,需要寻找适用于该硬件的第三方驱动。例如,可以尝试找到与Intel或...

    按钮控件(解决vb按钮功能不强的问题,免费!!)

    标题提到的"按钮控件(解决vb按钮功能不强的问题,免费!!)"正是为了解决这个问题而设计的增强型VB按钮控件。这种控件通过提供更多的自定义选项和功能,使得开发者可以创建出更具吸引力和用户友好性的界面。 首先...

    用多线程同步方法解决生产者-消费者问题(操作系统课设)

    这里,“非空”信号量表示消费者可以安全地从缓冲区中取元素,而“非满”信号量则表示生产者可以安全地向缓冲区中添加元素。信号量的值代表了对应资源的可用数量。 - **互斥锁**:互斥锁用于保护对共享资源的访问,...

    jquery不支持toggle()高(新)版本的问题解决

    为了解决在使用新版本jQuery时遇到的toggle()方法不被支持的问题,可以自定义一个兼容的函数。上述提供的代码段就是一个例子。这个自定义的toggle函数的作用是模仿旧版本jQuery中的toggle()方法的行为,使得开发者...

    解决myeclispe10.5&10.6&10.7导出war包出错的问题

    在IT行业中,开发Java Web应用时,我们常常使用集成开发环境(IDE)如MyEclipse进行项目构建。...在处理这类问题时,耐心和仔细的排查是关键,同时保持对新版本和社区支持的关注也是解决复杂问题的有效途径。

    点击A元素触发B元素的事件在IE8下会识别成A元素

    1. **事件委托**:将事件监听器添加到父元素上,而不是直接添加到A和B元素。这样,不论哪个子元素触发事件,都能正确捕获。在事件处理函数中,可以通过`event.target`判断实际触发事件的元素。 2. **条件修复**:如...

    system.servicemodel

    在描述中提到的“帮助解决无法找到 system.servicemodel 的问题”,通常这种情况表明开发环境中缺少了对 WCF 相关组件的引用或者配置不正确。要解决这个问题,开发者可能需要检查以下几点: 1. **添加引用**:确保...

    绝对可用的multiselect demo

    标题"绝对可用的Multiselect Demo"意味着这个示例是一个经过验证的、可以直接使用的Multiselect插件实例,它避免了开发者在寻找并尝试各种示例时可能遇到的问题。 描述中的信息表明,作者在寻找适用于项目的jQuery ...

    QTP识别JAVA界面元素的大概技术原理

    这样,QTP能够及时了解应用程序中所有可用的界面元素类,并对其进行进一步的识别和操作。 - **类加载信息获取**:QTP通过JVMTI的ClassPrepare事件,可以获取到类的详细信息,包括方法、字段和属性等,这对于识别Java...

    IFrame中Session丢失的解决办法

    使用Frameset时,每个框架都视为独立的文档,因此需要在每个框架的页面加载事件中添加响应代码,如`page_onload`事件,以确保Session的一致性和可用性。 6. **了解浏览器差异:** 不同浏览器对P3P、Cookies和...

Global site tag (gtag.js) - Google Analytics