之前就一直受这个问题的困扰,在写ajax加载数据的时候发现,后面追加进来的demo节点元素,失去了之前的点击事件。为什么点击事件失效,我们该怎么去解决呢?那么,我们通过下面的示例简单说明。

示例如下:

<div>
<ul id="demo">
<li>Kubernetes:下一代分布式系统的护戒使者</li>
<li>机器学习工具--Pandas cheat sheet</li>
<li>Android 8.0 正式版即将发布 谷歌还要建超人模型</li>
...
//li是动态生成
</ul>
</div> <script type="text/javascript">
//动态像ul的末尾追加一个新元素
$("#demo").append('<li>Kubernetes:下一代分布式系统的护戒使者</li>');
$("#demo").append('机器学习工具--Pandas cheat sheet');
$("#demo").append('Android 8.0 正式版即将发布 谷歌还要建超人模型');
...
</script>

错误示范:

// 示范一
$("#demo li").click(function(){
alert($(this).html());
});
// 示范二
$("#demo li").on('click',function(){
alert($(this).html());
});

通过运行以上代码,就会发现动态生成的标签事先绑定的点击事件点击了没反应。总结一下,推测上面这个监听函数,是在网页加载的时候就指定了对象,而通过代码追加,如通过js追加的元素,是不能匹配这个事件的。那么,我们应该使用什么来绑定动态元素呢,支持给动态元素和属性绑定事件的是live和on,其中live在JQUERY 1.7之后就不推荐使用了。现在主要用on,使用on的时候也要注意,on前面的元素也必须在页面加载的时候就存在于dom里面。动态的元素或者样式等,可以放在on的第二个参数里面。

正确示范:

$("#demo").on('click', 'li',function(){
alert($(this).html());
});

以上所述是小编给大家介绍的jQuery on()方法绑定动态元素的点击事件的相关知识,希望对大家有所帮助。

jQuery绑定动态元素的点击事件无效的更多相关文章

  1. jQuery on()方法绑定动态元素的点击事件无效

    之前就一直受这个问题的困扰,在jQuery1.7版本之后添加了on方法,之前就了解过,其优越性高于live(),bind(),delegate()等方法,在此之前项目中想用这个来测试结果发现,居然动态 ...

  2. jQuery on()方法绑定动态元素的点击事件无响应的解决办法

    $('#check_all').on('click' , function(){ alert(1); }); $("#yujinlist").append(html); count ...

  3. jQuery on()方法绑定动态元素的点击事件

    之前就一直受这个问题的困扰,在jQuery1.7版本之后添加了on方法,之前就了解过,其优越性高于live(),bind(),delegate()等方法,在此之前项目中想用这个来测试结果发现,居然动态 ...

  4. jQuery on()方法绑定动态元素的点击事件实例代码浅析

    之前就一直受这个问题的困扰,在jQuery1.7版本之后添加了on方法,之前就了解过,其优越性高于live(),bind(),delegate()等方法,在此之前项目中想用这个来测试结果发现,居然动态 ...

  5. JS动态append之后点击事件无效

    今天做项目用了append向HTML里面添加结构代码,代码添加之后,单击事件就没反应了.搞得我一脸懵逼,调了代码很久实在不行,我百度了一下才发现,append添加的节点单击事件是不会生效的. 原因: ...

  6. jquery 绑定动态元素

    以一个小例子来简单说明下情况 ? 1 2 3 4 5 6 7 8  <script src="jquery-1.11.0.min.js"></script> ...

  7. jQuery触发<a>标签的点击事件无效

    <a id="workFrame" href="pages/work.html" target="FrameBox">首页< ...

  8. 关于jQuery出现的新添加元素点击事件无效

    //通常点击写法: $(".div").on('click', function () { var $this = $(this); var isActive = $this.ha ...

  9. jquery无法为动态生成的元素添加点击事件的解决方法

    遇到 jquery无法为动态生成的元素添加点击事件,谷歌一下,整理一下解决方法如下: (<li>中间的元素是动态生成的), 现在想为<i>添加点击事件, 例子如下: <d ...

随机推荐

  1. ZOJ3166【找环值最小】

    题意: 给你一幅图,要你找一个hotel能够满足出去回来,而且保证权值最小: 思路: 可以搜环,然后取最小权值环,拿个点: floyd方便,初始话自己到自己就是无穷,然后就枚举一下给出的hotel就好 ...

  2. Unity3d 3d角色换装实现原理及步骤

    http://www.cnblogs.com/dosomething/archive/2012/04/15/2450526.html 1.角色模型制作 unity3d支持Skin动画  但是不支持Ph ...

  3. python-selenium-robotframework安装问题

    背景 当前系统安装了两个不同版本的python,分别是python27和python36(如图1),如图 说明 系统安装的两个python版本,python2中的python.exe默认不做修改:py ...

  4. [题解](区间质数筛)POJ_2689 Prime Distance

    区间筛素数:先筛出1~sqrt(R)的素数,然后对于每个询问只要用这些素数筛掉区间内的合数即可. 几个细节:1.特判和1有关的一些情况 2.每次减去L偏移量,数组只开区间大小 3.POJ无法使用万能头 ...

  5. DRF教程5-API接口文档和接口测试

    配置 配置好,就可以访问web页面 pip install coreapi #安装依赖 from rest_framework.documentation import include_docs_ur ...

  6. 可视化-grafana_使用influxDB数据

    1 添加数据源 给数据源取个名字,然后选择数据类型为influxDB. HTTP:8086是influxDB的HTTP查询API,grafana是通过这个接口获取数据. Details:选择从infl ...

  7. Ajax返回数据格式

      Ajax中返回数据的格式 Ajax中常见的返回数据的格式有三种:分别为文本,XML和JSON 返回的文本格式我们在上一堂课Ajax基础介绍中已经介绍过了 Ajax.php Form.html:通过 ...

  8. vs2013修改为双击打开文件

    vs2012和vs2013默认是单击打开文件,让人突然就不习惯了,各种不爽. 修改方法: 工具-选项-环境-选项卡和窗口-不勾选允许在预览选项卡中打开新文件.

  9. CF1093D Beautiful Graph

    思路: 题目倒是没啥好说的,就是注意memset的效率问题.如果循环多次调用memset去初始化一个比较大的数组,那就会很费时间.就是因为这个被hack了.:( 实现: #include <bi ...

  10. 20170308web作业1

    代码20170308001: <%@ page language="java" import="java.util.*" pageEncoding=&qu ...