在写ajax加载数据的时候发现,后面添加进来的demo节点元素,失去了之前的点击事件。

其实最简单的方法就是直接在标签中写onclick="",但是这样写有些场景的是实现不了的,最好的方式还是通过给类名绑定一个click事件。

方法一:使用live:

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

代码示例:

$('.demo1').live('click', function(){
alert('OK');
});

  

方法二:使用on:

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

代码示例:

$("#demo").on('click','.demol',function(){
alert('OK')
});

  

js中 ajax动态新增节点无法触发点击事件的更多相关文章

  1. 解决jQuery ajax动态新增节点无法触发点击事件的问题

    在写ajax加载数据的时候发现,后面添加进来的demo节点元素,失去了之前的点击事件.为什么点击事件失效,我们该怎么去解决呢? 其实最简单的方法就是直接在标签中写onclick="" ...

  2. 关于AJAX异步加载节点无法触发点击事件问题的解决方式

    做练习的过程中遇到一个问题,使用AJAX异步新增一个节点,无法触发点击事件,经过查阅之后知道一个方式,使用JS的委托事件,在此做一个记录. $(document).on('click', '.recr ...

  3. js中怎么为同级元素添加点击事件

    事件件是javascript脚本语言的重要组成部分,因为有事件才使用户页面的体验更加的美好.元素添加事件是js语言中最基础的.我们可以为元素本身添加事件,也可以通过事件绑定和事件监听为元素的父元素和子 ...

  4. angular JS中使用jquery datatable添加checkbox点击事件

    'use strict'; app.controller('DataTableCtrl', function ($scope, $compile) { $scope.selected = []; $s ...

  5. js中ajax如何解决跨域请求

    js中ajax如何解决跨域请求,在讲这个问题之前先解释几个名词 1.跨域请求 所有的浏览器都是同源策略,这个策略能保证页面脚本资源和cookie安全 ,浏览器隔离了来自不同源的请求,防上跨域不安全的操 ...

  6. prototype.js 和 jQuery.js中 ajax 的使用

    这次还是prototype.js 和 jQuery.js冲突的问题,前面说到过解决办法http://www.cnblogs.com/Joanna-Yan/p/4836252.html,以及上网说的大部 ...

  7. js中ajax连接服务器open函数的另外两个默认参数get请求和默认异步(open的post方式send函数带参数)(post请求和get请求区别:get:快、简单 post:安全,量大,不缓存)(服务器同步和异步区别:同步:等待服务器响应当中浏览器不能做别的事情)(ajax和jquery一起用的)

    js中ajax连接服务器open函数的另外两个默认参数get请求和默认异步(open的post方式send函数带参数)(post请求和get请求区别:get:快.简单 post:安全,量大,不缓存)( ...

  8. vue中Enter触发登录事件和javascript中Enter触发点击事件

    created(){ window.addEventListener('keydown', this.handleKeyDown, true)//开启监听键盘按下事件 } 在methods中当keyC ...

  9. JS实现按下按键触发点击事件

    <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title> ...

随机推荐

  1. PHP中||与or的区别

    一直认为PHP中“or”和“||”是可以划等号的,其实不然,它们存在一个优先级的差别.下面通过一个例子说明它们的差异: <?php $a = false || true; //'||'的优先级大 ...

  2. Java集合类源码解析:AbstractList

    今天学习Java集合类中的一个抽象类,AbstractList. 初识AbstractList AbstractList 是一个抽象类,实现了List<E>接口,是隶属于Java集合框架中 ...

  3. Android APK 签名文件MANIFEST.MF、CERT.SF、CERT.RSA分析

    首先我们找一个已经签名的apk文件,修改后缀名为zip,然后解压.可以看到里面有一个META-INF文件夹,里面就是签名验证的文件.有三个文件MANIFEST.MF.CERT.SF.CERT.RSA分 ...

  4. Servlet版本冲突引起的Error

    本地打包部署应用都可以正常启动和响应请求,但是通过CI打包部署到服务器有请求进来时就会报错: java.lang.NoSuchMethodError: javax.servlet.http.HttpS ...

  5. 【Spring】Autowired原理及与Resource注解区别

    Autowired注解 Autowired顾名思义,表示自动注入,如下是Autowired注解的源代码: @Target({ElementType.CONSTRUCTOR, ElementType.M ...

  6. 浅谈Java虚拟机内存中的对象创建,内存布局,访问定位

    参考于 深入理解Java虚拟机 这里介绍HotSpot虚拟机(自带的虚拟机) 1.对象的创建 对于程序员来说,创建对象的方法: User user1 = new User(); User user2 ...

  7. js 高级程序设计(笔记)

    第二章 1.为了避免浏览器在呈现页面时出现明显的延迟,现代Web 应用程序一般都把全部JavaScript 引用放在<body>元素中页面内容的后面. 第三章 1.ECMAScript 中 ...

  8. vuex最详细完整的使用用法

    来自:https://blog.csdn.net/qq_35430000/article/details/79412664#commentBox  github仓库地址:https://github. ...

  9. 后端开发者的Vue学习之路(四)

    目录 上节内容回顾: npm 介绍 安装 常用命令: 补充: 基于npm的Hello World 项目结构分析 用法迁移 小提醒 ES6语法 知识补充 单文件组件 使用注意: 路由 开启路由 定义路由 ...

  10. 控制台程序读取Excel设置角色权限

    摘要: 本人微信公众号:微软动态CRM专家罗勇 ,回复283或者20181118可方便获取本文,同时可以在第一间得到我发布的最新博文信息,follow me!我的网站是 www.luoyong.me ...