因为最近项目遇到这个问题,下面给大家带来一篇Jquery对新插入的节点 获取并对这个节点绑定事件失效的解决方法。我觉得挺不错的,大家也可以参考一下:

对于绑定事件来讲:

      方法一:使用live

live()函数会给被选的元素绑定上一个或者多个事件处理程序,并且规定当这些事件发生时运行的函数。通过live()函数适用于匹配选择器的当前及未来的元素。比如,通过脚本动态创建的元素。

实现如下:

1
2
3
$('.liLabel').live('click', function(){
 alert('OK');
});

       方法二:使用on

可以通过on方法绑定事件,可以绑定到它的父级或者body中,实现如下:

1
2
3
4
5
6
7
$("#ulLabel").on('click','.liLabel',function(){
 alert('OK')
});
或者:
$("body").on('click','.liLabel',function(){
 alert('OK')
});

对于each()事件来讲:

方法一、刚创建完元素的时候,就立刻使用each方法

代码如下:

$('#btn').on("click", function(){

$('#div').append("<input type='text' />");

$("input").each(function(){

//TODO:

});

});

方法二、使用setTimeout方法在页面加载完成一段时间后再使用each方法

代码如下:

setTimeout(function(){

$("input").each(function(){

//TODO:

});

},1000);

是不是新插入的节点 对这个节点绑定事件失效问题解决了,希望这篇随笔能够帮助大家

jquery 对于新插入的节点 的操作绑定(点击事件,each等)的更多相关文章

  1. (转载)js(jquery)的on绑定点击事件执行两次的解决办法

    js(jquery)的on绑定点击事件执行两次的解决办法—不是事件绑定而是事件冒泡 遇到的问题:jquery中用.on()给页面中新加的元素添加点击事件时,点击事件源,绑定的事件执行两次,这里的ale ...

  2. JQuery 动态加载 HTML 元素时绑定点击事件无效问题

    问题描述 假设项目中有一个列表页面,如下: 当点击列表一行数据可以显示详情页面,而详情页面的数据是根据当前行的数据作为参数,通过 ajax 请求到后台返回的数据,再根据返回的结果动态生成 html 页 ...

  3. jQuery实现当按下回车键时绑定点击事件

    jQuery实现当按下回车键时绑定点击事件 <script> $(function(){ $(document).keydown(function(event){ if(event.key ...

  4. 通过jQuery给<li>绑定点击事件

    背景:有个需求需要js中实现li标签的事件绑定,li通过在ajax请求中动态添加,按照常理,使用jQuery,可以使用以下方法绑定点击事件: $(function(){  commonAjaxCall ...

  5. jquery绑定点击事件的三种写法

    一.用jquery动态绑定点击事件的写法 部分代码: <script type="text/javascript"> $(document).ready(functio ...

  6. jquery为动态添加元素绑定点击事件

    on()方法添加的事件处理程序适用于当前及未来的元素(比如由脚本创建的新元素) $("#mainbody").on("click",".link&qu ...

  7. Jquery学习笔记:删除节点的操作

    假设如下的html代码 <div id="mydiv" style="width:100px;height:100px;border:1px solid red&q ...

  8. js(jquery)绑定点击事件

    <button type="submit" id="test">test</button> 第一种 $("#test" ...

  9. jquery中绑定点击事件

    $("body").on("click",".tab-contentBox td",function(){}; $(".tab-c ...

随机推荐

  1. Django Rest Framework API指南

    Django Rest Framework API指南 Django Rest Framework 所有API如下: Request 请求 Response 响应 View 视图 Generic vi ...

  2. mysql添加字段索引失败 BLOB/TEXT column 'col2' used in key specification without a key length

    看了下该表的数据结构发现col2字段类型是text ,查询了下发现是:MySQL只能将BLOB/TEXT类型字段设置索引为BLOB/TEXT数据的钱N个字符.索引指定下col2的长度就可以了 : al ...

  3. Django信号量

    摘自官方文档 使用 信号 Django发送的所有信号的列表.使用该send()方法发送所有内置信号. 参见 有关如何注册和接收信号的信息,请参阅信号调度器上的文档. 用户登录/注销时,身份验证框架会 ...

  4. 从消费者看 rebalance

    kafka java 客户端发送请求,大量使用 RequestFuture,因此先说明下该类. RequestFuture 类的成员属性 listeners 是 RequestFutureListen ...

  5. java网络通信:netty

    Netty提供异步的.事件驱动的网络应用程序框架和工具,用以快速开发高性能.高可靠性的网络服务器和客户端程序. 也就是说,Netty 是一个基于NIO的客户,服务器端编程框架,使用Netty 可以确保 ...

  6. nginx创建默认虚拟主机

    创建默认虚拟主机配置文件作用:禁止任何人通过ip或未允许的域名访问web服务. 如:vim vhosts/default.conf server { listen 80 default; server ...

  7. 阶段3 1.Mybatis_12.Mybatis注解开发_7 Mybatis注解开发一对多的查询配置

    一对多的配置,一个用户对应多个账户 需要在Accout里面增加根据用户的uid查询的方法 在user里面指定子一对多的查询配置 换行显示 测试 把这里注销掉.测试延迟加载,代码注释掉后,延迟加载就没有 ...

  8. C# 无焦点获取扫码枪扫码信息

    代码网上有的是,多是需要窗体焦点直接show出扫码信息(usb,模拟键盘,hook) 怎样才能真的无焦点获取? 用串口方式 usb转串口 以接收串口通讯消息的方式获取扫码信息

  9. (四) appium-desktop 脚本录制常用AW使用介绍

    通过使用appium-desktop录制脚本,编写app自动化脚本的过程中,会使用到一些AW,下面就这些AW的使用方法做详细的介绍.通过实践可以看到这几个AW可以完成测试工作. AWOpenGiveP ...

  10. Oracle 查看一个数据库实例下面所有的表大小

    1. 因为 oracle有一些 lob字段 在user_extents 里面取出来的结果不是表名, 所以需要与user_lobs 表做关联查询才可以 本来想通过 关联查询来实现, 发现字表查询更简单 ...