当前位置:首页 > 日记 > 正文

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

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

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

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

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

 <ul id="demo">  <li class="demo1">a1</li>  <li class="demo1">a2</li>  <li class="demo1">a3</li> </ul>  <script type="text/javascript"> $("#demo").click(function(){  $("#demo").append('<li class="demo1">aaa4</li>'); //动态像ul的末尾追加一个新元素 }); </script>

方法一:使用live:

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

实现如下:

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

方法二:使用on:

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

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

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

以上所述是小编给大家介绍的解决jQuery ajax动态新增节点无法触发点击事件的问题,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对网站的支持!

相关文章

excel2007怎么能粘贴怎么办

excel2007怎么能粘贴怎么办

复制粘贴,处理方法,电脑软件,  我们在粘贴数据的时候,经常会遇到:&ldquo;excel 无法粘贴信息,原因是复制区域与粘贴区域形状不同&rdquo;的提示,那么如何解决这个问题呢?下面小编马上就告诉大家Excel2007复制粘贴的处理方法,希望小编整理的资…

ppt2013如何动画窗格图文教程

ppt2013如何动画窗格图文教程

动画,图文教程,窗格,使用方法,电脑软件,  ppt2013动画窗格知道怎么用吗 ?其实动画窗格里面有很多动画元素,例如设置幻灯片自动播放,那么大家知道怎么设置呢? 下面小编就为你提供ppt2013如何设置自动播放 的方法啦!ppt2013动画窗格的使用方…

JavaScript箭头函数_动力节点Java

JavaScript箭头函数_动力节点Java

节点,学院,函数,箭头,动力,ES6标准新增了一种新的函数:Arrow Function(箭头函数)。为什么叫Arrow Function?因为它的定义用的就是一个箭头:x => x * x上面的箭头函数相当于:function (x) { return x * x;}在继续学习箭头函数之前,请测试你的浏览器…

js实现数组内数据的上移和下移的实

js实现数组内数据的上移和下移的实

数组,数据,实例,电脑软件,js,实例如下所示:var swapItems = function(arr, index1, index2){  arr[index1] = arr.splice(index2,1,arr[index1])[0]  return arr}var arr = [1,2,3]var newArr = []upData (arr, index) {  if (this.ar…

jQuery代码实现实时获取时间

jQuery代码实现实时获取时间

代码实现,获取时间,实时,电脑软件,jQuery,在上篇文章给大家介绍了jQuery动态地获取系统时间实现代码,大家可以参考下。废话不多说了,直接给大家贴代码了,具体代码如下所示:$(document).ready(function(){function time(){var date=new Date();v…

如何在Word文档中使用Active控件排

如何在Word文档中使用Active控件排

控件,文档,如何在,电脑软件,Word,  在用word输入文字中,有时需要使用Avtive控件来丰富word文档的排版效果。这里可以用软件自带的Active控件。以下是小编为您带来的关于Word文档使用Active控件排版,希望对您有所帮助。Word文档使用Active控…

powerpoint怎样给文字插入超级链

powerpoint怎样给文字插入超级链

文字,超链接,网页,方法,电脑软件,  在制作幻灯片的时候,怎么在其中设置网页链接呢?其实设置超链接的方法不难,下面小编就为你介绍powerpoint如何链接网页的方法啦!希望小编整理的资料对大家有帮助。PPT插入超链接网页的方法在ppt中插入网页…

怎么让PPT2003中的数据图表动起来

怎么让PPT2003中的数据图表动起来

图表,数据,电脑软件,  为了加强PPT演示文稿的说服力,常常会在幻灯片中使用图表。如果使用图表后再为它设置一下序列动画,让数据演示也动起来,则通常能达到吸引听众注意力,强化演示说服力的良好效果。以下是小编为您带来的关于让PPT2003中的数…

WPS文字将文字内容隐藏起来有什么

WPS文字将文字内容隐藏起来有什么

文字,方法,有什么,内容,电脑软件,  在WPS文字中,你是不是不相信文字可以被隐藏呢?现在WPS文字就可以帮助你隐藏答案。以下是小编为您带来的关于WPS文字将文字隐藏起来,希望对您有所帮助。WPS文字将文字隐藏起来操作步骤1 打开一篇WPS文档,用…

ps怎么合成人物头像的硬币?

ps怎么合成人物头像的硬币?

硬币,头像,人物,电脑软件,ps,ps中想要将两张图形合并到一起去,人物头像和硬币,该怎么合成呢?下面我们就来看看详细的教程。软件名称:Adobe Photoshop 8.0 中文完整绿色破解版软件大小:150.1MB更新时间:2015-11-041、首先准备好这样一张空白的硬币…

PPS文件如何转化为PPT文件PPS文件

PPS文件如何转化为PPT文件PPS文件

文件,方法,文档,转化为,格式,  有的时候,我们下载的文件是幻灯片放映格式,打开的时候直接是放映。怎么可以转换成PPT。以下是小编给大家整理的PPS文件转化为PPT文件的方法,希望能帮到你!PPS格式的文件转化为PPT文件的方法1、幻灯片放映格式…

非主流qq签名名言名句

非主流qq签名名言名句

名句,名言,非主流,大全,电脑软件,  一句非主流签名:有时候电视剧看多了就会以为自己的故事也会发生奇迹。下面小编给大家分享了关于非主流qq签名名言名句,希望你喜欢。非主流qq签名名言名句精选1) 有很多感觉或者激情,那都不是爱2) 不要后…