jquery on() ajax 首次没反应,解决jQuery ajax动态新增节点无法触发点击事件的问题...

在写ajax加载数据的时候发现，后面添加进来的demo节点元素，失去了之前的点击事件。为什么点击事件失效，我们该怎么去解决呢?

其实最简单的方法就是直接在标签中写οnclick=""，但是这样写其实是有点low的，最好的方式还是通过给类名绑定一个click事件。

解决jQuery ajax动态新增节点无法触发事件问题的两种解决方法，为了达到更好的演示效果，假设在某个页面的body下有以下结构的代码：

• a1
• a2
• a3

$("#demo").click(function(){

$("#demo").append('

aaa4'); //动态像ul的末尾追加一个新元素

});

方法一：使用live：

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

实现如下：

$('.demo1').live('click', function(){

alert('OK');

});

方法二：使用on：

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

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

alert('OK')

});

通过上面的两种方法，都可以解决jQuery ajax动态新增节点无法触发点击事件的问题。知道方法了，赶紧的试试吧。

来源：http://www.shuchengxian.com/Article/info/id/228.html

js中 ajax动态新增节点无法触发点击事件

在写ajax加载数据的时候发现,后面添加进来的demo节点元素,失去了之前的点击事件. 其实最简单的方法就是直接在标签中写οnclick="",但是这样写有些场景的是实现不了的,最 ...

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

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

jquery中动态新增的元素节点无法触发事件解决办法

在使用jquery中动态新增的元素节点时会发现添加的事件是无法触发的,我们下面就为各位来详细的介绍此问题的解决办法． 比如做一个ajax读取留言列表的时候,每条留言后面有个回复按钮,class为“re ...

jQuery之防止冒泡事件,冒泡事件就是点击子节点，会向上触发父节点，祖先节点的点击事件。

冒泡事件就是点击子节点,会向上触发父节点,祖先节点的点击事件. 下面是html代码部分:

外层div元素 ...

解决JavaScript拖动时同时触发点击事件的BUG

在做在线地图项目的时候,在给marker点绑定事件时,因为有点击事件click,同时又存在拖动dragEnd事件,首先没有重大缺陷,就是在用户在点击的时候,有时候本想是点击,但是他触发了drag的事件 ...

jQuery中animate动画第二次点击事件没反应

jQuery中animate动画第二次点击事件没反应 用animate做点击翻页动画时发现第二次点击事件动画没反应,而第一次点击有动画效果,代码如下: 复制代码 代码如下: $(".page ...

view.performClick()触发点击事件

1.主要作用 自动触发控件的点击事件 2.界面的布局文件  activity_main.xml

linux C 数组操作

/****************************************************************** * linux C 数组操作 * 声明: * 本文为解决陈颖奇遇 ...

HDU [P2819] swap

二分图行列匹配+输出路径 经典题,当且仅当一行匹配一列的时候,符合题意. 本题的难点在于如何输出路径,我们发现这个移动的过程就是将所有匹配选择排序,在选择排序时输出路径即可 #include < ...

洛谷&period;1919&period;&lbrack;模板&rsqb;A&ast;B Problem升级版&lpar;FFT&rpar;

题目链接:洛谷.BZOJ2179 //将乘数拆成 a0*10^n + a1*10^(n-1) + ... + a_n-1的形式 //可以发现多项式乘法就模拟了竖式乘法 所以用FFT即可 注意处理进位 ...

sqler sql 转rest api 源码解析(一)应用的启动入口

sqler sql 转rest api 的源码还是比较简单的,没有比较复杂的设计,大部分都是基于开源 模块实现的. 说明: 当前的版本为2.0,代码使用go mod 进行包管理,如果本地运行注意gol ...

BZOJ&period;2194&period;快速傅立叶之二&lpar;FFT 卷积&rpar;

题目链接 \(Descripiton\) 给定\(A[\ ],B[\ ]\),求\[C[k]=\sum_{i=k}^{n-1}A[i]*B[i-k]\ (0\leq k

用platformio编写arduino程序

哈哈,今天浏览arduino.cc官网,找到一个好东东,以后,在ubuntu下用终端编程在也不发愁了. platformio.org是一个物联网全能的IDE,甚至还贴心的提供了在命令行下编程的版本:p ...

C&plus;&plus; - memset的效率和源码分析

void *memset(void *s, int ch, size_t n); 作用:将s所指向的某一块内存中的每个字节的内容全部设置为ch指定的ASCII值, 块的大小由第三个参数指定,这个函 ...